css3给情况照片加色调遮罩的方式

日期:2021-02-28 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

前段時间在开发设计中,遇到必须给情况层加色调遮罩的新项目,如今特殊总结1下给情况涂层加色调遮罩的方式。

方式1:根据精准定位叠加(留意等级)

<div class="wrap1">
     <div class="inner"> </div>
</div>
.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: ⑴;
}

方式2:根据伪类元素叠加

<div class="wrap2"></div>
.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;
}

方式3:CSS3色调叠加background-blend-mode:multiply;(正片叠底)

<div class="wrap3"></div>
.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;
}

总结

以上所述是网编给大伙儿详细介绍的css3给情况照片加色调遮罩的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!
 

上一篇:应用Rem合理布局完成自融入 返回下一篇:没有了