详解如何给背景图片加颜色遮罩

zorpan 发布于2019-08-30 10:59 / 1213人阅读

摘要：前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。

前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。

方法一：通过定位叠加(注意层级)

.wrap1 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: rgba(0, 0, 0, .5);
}

.wrap1 .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
    z-index: -1;
}

方法二：通过伪类元素叠加

.wrap2 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
}

.wrap2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
}

方法三：CSS3颜色叠加background-blend-mode:multiply;(正片叠底)

.wrap3 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
}

拓展：背景模糊加颜色叠加

.wrap4 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
    filter: blur(2px);
    overflow: hidden;
}

如有问题欢迎大家讨论指出，如有更好的方法，请不吝赐教，谢谢~~

云服务器 GPU云服务器给视频加背景音乐 html给按钮加背景 php 给图片加属性给图片加文字的app

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114698.html

详解如何给背景图片加颜色遮罩

摘要：前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。 showImg(https://segmentfault.com/img/bVbs6Hv?w=1216&h=417); 方法一：通过定位叠加(注意层级) .wrap1 { ...

xuexiangjys 2019-08-02 15:09 评论0 收藏0
mask-image的应用

摘要：大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。利用能做出一些不错的效果，比如。想到用这个属性正合适，于是要来了心型图片，拿到设计师导出的文件，用压缩下得到一个。遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我...

HollisChuang 2019-08-30 11:19 评论0 收藏0