css3正片叠底

Posted fstgshow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3正片叠底相关的知识,希望对你有一定的参考价值。

上图是在工作时候遇见的一个效果,ps里面的效果就是上面的,咋一看以为就是红色背景透明度,然后马上就搞最后发现效果完全不一样的。这个图是ps的正片叠底效果的。百度搜资料的时候,关键是 css3正片叠底会有好多资料,我这里就根据我自己的了解简单说一下这个正片叠底效果。

这个东西叫做css3 混合模式,背景混合啊 图片和图片混的的。具体的我也没有搞清楚,我只是知道了这个正片叠底(图片与图片混合)模式

<body>
    <div class="multiply">
    <p>multiply正片叠底效果</p>
    <img src="testimg/redbg.jpg" alt="" />
</div>
</body>

这是html结构。div是有背景图片,就是上面图里面的老奶奶,img标签是红色的图片,纯红色不透明。

css如下:

div {width:640px;height:1008px;margin: 0 auto;
background: url(\'testimg/hel_bg.jpg\') center;

/*这里是背景图片*/
background-size: cover;
}
.multiply img { /*这个图片需要正片叠底的纯颜色图片,不透明,这里是红色*/
mix-blend-mode: multiply;
}
这样效果就是ps的正片叠低了,关键的属性就是img标签的
mix-blend-mode: multiply;、
上面的效果是在一个背景图片上面浮动了另一个图片,两个图片重合部分正片叠底了,下面的是另一种情况
 /*-------情况二----------------*/
<div class="multiply">
<p>multiply</p>
<!--<img src="testimg/redbg.jpg" alt="" />-->
</div>
html结构,我注释掉了img标签,这个div里面没有图片标签了
css;
div {width:640px;height:1008px;margin: 0 auto;
background: url(\'testimg/hel_bg.jpg\') center;
background-color: red;
background-size: cover;
 background-blend-mode: multiply;
}
这里就是div自己的背景图片和自己的背景颜色混合了,实现了正片叠低。注意只有一个元素div,这个div有背景图片和背景颜色。

background-blend-mode: multiply;是div属性,mix-blend-mode: multiply; 是img的属性,两个东西有差别

以上是关于css3正片叠底的主要内容,如果未能解决你的问题,请参考以下文章

基于Qt的OpenGL可编程管线学习(14)- 正片叠底逆正片叠底

基于Qt的OpenGL可编程管线学习(14)- 正片叠底逆正片叠底

ps-混合模式

拼接

PS 中混合模式

PS中图层混合模式的计算方法