CSS实现图片和颜色融合的暗色半透明显示效果

叶川飞流

于 2019-03-13 21:39:39 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_41033048/article/details/88542215

版权

实现原理：在父级元素下新建一个子元素，子元素引入图片，设置为脱离文档流absolute的属性，并且设置为z-index:-1，而父级元素设置为半透明的灰色就可以实现了。
html代码：

 <div class="register">
        <img class="banner" src="./banner.jpg" alt="">
        	……
 </div>

css代码：

<style lang="scss" scoped>
    .register{
        position: absolute;
        overflow: hidden;
        width: 100%;
        min-height: 100%;
        height: auto;
        background:rgba(7,17,27,0.5);
       .banner{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            z-index:-1;
       }
}
</style>