本文摘自PHP中文网,作者V,侵删。
1、初始index.html
为了建立第一张照片,也就是最上面的那张。我们只需要添加一个div,里面包含照片的img。就这么多,剩下的效果都是通过CSS来实现的。确保div的class为stackone。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html>
< html >
< 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 >
< img src = "../../../assets/image/landscape-4378548_960_720.jpg" />
</ div >
</ body >
</ html >
|
初始的效果如下:
(推荐教程:CSS入门教程)
2、The First Pseudo Element
现在我们添加一层底片。我们想得到的效果是:底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。
1 2 3 4 5 6 7 8 9 10 | .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
阅读剩余部分
相关阅读 >>
15 个优秀的响应式 web 设计 html 和 css 框架
css首行缩进怎么弄
老司机来和你谈谈,为什么说css是最难的!!
css实现一个简单的扁平化按钮
css如何设置表格标题(caption标签)的位置
css实现3d切换功能的代码示例
css设置边框的属性有哪些
什么是css伪类
css怎么去掉焦点框
css中的bootstrap是指什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何实现图片堆叠效果