啥是背景图叠加啊？

说句实话… 哎呀，说白了就是把一张图片盖在另一张图片上面。以前做网页的时候，想要实现当前这个效果，那可真实是麻烦事儿！得用各种嵌套的 `div`，而且兼容性嘛…呵呵哒。当前呢？用 CSS 就简洁了！就像盖房子一样，一层一层往上堆砌。

为哪些要用 CSS 背景图叠加呢？

原因很简洁啊！美观嘛！有了背景图叠加，网页就更有层次感了。能够给图片加个阴影效果、或者给文字加个装饰。想想看，是不是一下子较高级了不更少？而且以后维护起来也方便更多了，我心态崩了。。

方法一：更多背景图

CSS 里有个特性叫 `background-image` 能够写更多个不同。用逗号隔开就行了。顺序很十分沉关键哦！最前面写的那个地方的就是最底层的。

.my-div { background-image: url, url; }，翻车了。

但是这种方法良好像不太良好玩…感觉有点像把两张图片拼在一起似的。不如我们试试别的法子，戳到痛处了。？

方法二：伪元素较大法良好

采用 ::before 和 ::after

.myDiv{position : relative ; width :400px ; height :300px ; background : url ;} .myDiv::before{content:"";position :absolute ;top :5%;left :5% ;width :95% ;height :95% ;background :url ;z-index : -1;}，太虐了。

伪元素的原理

归根结底。 注意啦！ 这里的::before和::after 是伪元素 ，能够让我们在元素的内容前后插入内容。 我们利用当前这个特性在图片的上面再添加一张较小图 。 这样就能实现叠加的效果啦。

方法三：绝对定位 + z-index

怎么操作

• 一定要让父容器设置 `position：relative` ，否则绝对定位的子元素会相对于文档根节点定位
• 前景图片的 `z-index` 值要较大于背景图片的

进阶玩法：还能怎么玩？

透明度调整

.myDiv { background-image: url; background-color:#FFFFFF transparent;}

变换效果

一下…

CSS 背景图叠加其实很简洁。记住几个关键点：父容器要设置 `position：relative` ， 子元素要设置 `position：absolute` ， 我是深有体会。 还要注意 `z-index` 的采用。掌握了这一些技巧，你就能轻巧松打造出各种炫酷的网页效果啦！