CSS如何做图片堆叠展示的效果？

发布时间：2023-12-27 19:30:33 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是用CSS做图片堆叠展示的效果，具体的实现效果如下，这种图片展示的效果能增加网站的个性，美化页面，还是比较有趣的，因此分享给大家做个参考，文中示例代码介绍的很详

这篇文章给大家分享的是用CSS做图片堆叠展示的效果，具体的实现效果如下，这种图片展示的效果能增加网站的个性，美化页面，还是比较有趣的，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

步骤

1.初始index.html

为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Photo Stack</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.stackone {
--img-width: 480px;
--img-height: 320px;
border: 6px solid #fff;
float: left;
height:var(--img-height);
width: var(--img-width);
margin: 50px;
position: relative;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.stackone img {
width: var(--img-width);
}
</style>
</head>
<body>
<div class="stackone">
<img src="../../../assets/image/landscape-4378548_960_720.jpg">
</div>
</body>
</html>

2.The First Pseudo Element

现在我们添加一层底片。我们想得到的效果是：底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。

.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

3.完善before

这不是我们想要的效果。如何修复？我们需要给:before加入一些定位，然后设置z-index将它放在后面。

.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;

position: absolute;
z-index: -1;
top: 0px;
left: -10px;

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}

以上就是关于用CSS怎样做图片堆叠展示的效果的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习CSS的使用有帮助。

（编辑：江门站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!