我试图弄清楚为什么mix-blend-mode: color;
css选择器和值会影响白色以外的所有颜色,而不是影响白色和黑色以外的所有颜色。有人可以向我解释为什么会这样吗?
答案 0 :(得分:0)
颜色混合模式 创建具有源颜色的色相和饱和度和背景色的发光度的颜色。这样可以保留背景的灰度等级,对于为单色图像着色或为彩色图像着色很有用。
因此,我们需要考虑hsl()
的颜色,对于白色,我们将拥有hsl(x, y, 100%)
,对于黑色,我们将拥有hsl(x, y, 0%)
(无论x,y的值如何)。因此,如果您的背景(背景颜色)是白色或黑色,那么结果颜色将是白色或黑色,因为它将保持亮度,并且无论色相和饱和度值如何,我们将始终使用白色或黑色。
img {
mix-blend-mode:color;
display:block;
}
div {
border:1px solid green;
display:inline-block;
}
<div >
<img src="https://picsum.photos/id/1/200/150">
</div>
<div style="background:#fff;">
<img src="https://picsum.photos/id/1/200/150">
</div>
<div style="background:#000;">
<img src="https://picsum.photos/id/1/200/150">
</div>
现在,如果我们考虑我们的颜色将始终为黑色或白色。在这种情况下,将使用黑色/白色的色相饱和度,并且我们会保持背景色的亮度。通常,我们将白色和黑色的色相和饱和度定义为0,因此我们将以hsl(0,0%,z)
结尾,其中z
将取决于背景图像。这意味着如果我们将黑色或白色视为颜色,我们将获得相同的结果(灰色图像):
div.box {
border:1px solid green;
display:inline-block;
background:url(https://picsum.photos/id/1/200/150);
width:200px;
height:150px;
}
div.box > div {
mix-blend-mode:color;
height:100%;
}
<div class="box">
<div></div>
</div>
<div class="box">
<div style="background:#fff"></div>
</div>
<div class="box">
<div style="background:#000"></div>
</div>