了解CSS混合，第1部分：变暗和变亮

If you’re anything like most other designers, your experience with blend modes in Adobe applications is usually one of “Hmmm, I wonder which one of these will work this time?"

如果您像大多数其他设计师一样，则在Adobe应用程序中使用混合模式的经验通常是“嗯，我想知道这一次哪个可行？”

Now that blend modes are in CSS, we want to eliminate at least some of that confusion so that we can create great designs without guesswork.

既然混合模式已在CSS中使用，我们希望至少消除一些混淆，以便我们无需猜测即可创建出色的设计。

The first clue to understanding blend modes actually comes from looking at the blend options available in an Adobe application. For example, PhotoShop CC on a Mac:

理解混合模式的第一个线索实际上来自查看Adobe应用程序中可用的混合选项。 例如，在Mac上，PhotoShop CC：

You can see that the modes are subtly divided by lines, creating groups. The first group,

Normal is the default mode, so we can ignore that for now. We can also ignore Dissolve, as that has not been ported to CSS. The second and third groups give us some insight. They are the darken and lighten groups, and, when applied, follow some fundamental rules:

Normal是默认模式，因此我们现在可以忽略它。 我们也可以忽略Dissolve ，因为还没有移植到CSS上。 第二和第三组给我们一些见识。 它们是变暗和变亮的组，并且在应用时遵循一些基本规则：

Darken modes will always darken the layer to which they are applied.

变暗模式将总是变暗到被施加它们的层。

Lighten modes will only ever lighten the layer they’re applied to.

变亮模式只会变亮应用于它们的图层。

We can demonstrate this easily. Given an image on top of a neutral background:

我们可以很容易地证明这一点。 给定图像位于中性背景之上：

<div id="blend-mode-example">
	<img src="woman-in-blue-dress.jpg" alt>
</div>

And applying the following CSS:

并应用以下CSS：

#blend-mode-example { background: #fff; }
#blend-mode-example img {
	width: 100%; height: auto;
	mix-blend-mode: darken;
}

We can see the result of manipulating the background color through the greyscale range (white to black) by attaching a range element and some JavaScript, shown in the example above. Try changing the background color from white to black using the slider; then try switching the mode to Lighten and sliding again.

通过附加一个range元素和一些JavaScript，我们可以看到在灰度范围(白色到黑色)中操纵背景颜色的结果，如上面的示例所示。 尝试使用滑块将背景颜色从白色更改为黑色； 然后尝试将模式切换为Lighten并再次滑动。

Note that when the background is completely black, lighten makes no difference to the image. As the luminosity of the background increases, the darkest areas of the image are affected first - the shadows in the model’s dress, in the example above - with lighter areas increasingly affected until the until image washes out to white.

请注意，当背景完全为黑色时， lighten对图像没有影响。 随着背景亮度的增加，图像的最暗区域首先受到影响-在上面的示例中，模型衣服的阴影受到影响，较亮的区域逐渐受到影响，直到图像逐渐变白。

With darken mode on the image, the opposite is true: a pure white background affects the foreground not at all, but darker shades increasingly affect the lightest portions of the image (skin tones and the rock foreground, in this example) until it completely fades to back.

使用图像上的darken模式时，情况darken相反：纯白色背景完全不会影响前景，但是较深的阴影会逐渐影响图像的最亮部分(在此示例中为肤色和岩石前景)，直到其完全消失为止回来。

其他变亮和变暗模式 (Other Lighten and Darken Modes)

If lighten are darken are opposites, it follows that the other modes in each set, screen and multiply, must be too.

如果变暗相反，则每个组中的其他模式( screen和multiply )也必须相同。

screen and multiply affect the tonal range of the layer differently: moving the slider in either mode allows and clicking the various options allows you to see that screen and multiply affect the colors in the affected image pretty much evenly.

screen并multiply影响图层的色调范围 ：在任一模式下移动滑块都可以，单击各种选项可以使您看到screen并multiply几乎均匀地影响受影响图像中的颜色。

变化 (Variations)

Of course, things get more complicated when the background layer is not a shade of grey, but the same rules apply: lighten modes always lightens the layer, darken modes always darken. It’s just that now the affected layer is “hinted" with the underlying color; the degree to which this occurs depends on the color’s distance from black or white and the mode applied.

当然，当背景图层不是灰色阴影时，事情会变得更加复杂，但是要遵循相同的规则： lighten模式总是使图层lighten ， darken模式总是变暗。 只是现在受影响的图层已被基础颜色“暗示”；其发生的程度取决于颜色与黑色或白色的距离以及所应用的模式。

翻译自: https://thenewcode.com/999/Understanding-CSS-Blend-Part-1-Darken-and-Lighten