###
CSS `
mix-blend-mode`
属性详解
#### 一、什么是 `
mix-blend-mode`
CSS 属性 `
mix-blend-mode` 描述了
设置元素与其直接父元素的背景如何混合，通过不同的
属性值，可以创建诸如叠加、滤色等多种视觉效果[^1]。
#### 二、支持的
属性值及其作用
该
属性接受多种模式作为其取值，每种模式都定义了一种特定的方式让两个图层相互影响：
- **normal**: 默认值。无特殊混合行为。
- **multiply** (正片叠底): 结果
颜色不会比原
颜色更亮。黑色乘任何色都是黑；白色则保持不变。
- **screen** (屏幕): 效果正好相反于 multiply。结果总是较浅的
颜色。
- **overlay** (叠加): 综合了 multiply 和 screen 的特性，取决于底层
颜色是深还是浅。
- ... 更多其他选项如 darken, lighten, color
-dodge 等也提供了丰富的可能性[^2].
#### 三、实例展示
为了直观感受这些不同模式带来的变化，这里给出几个简单的例子说明如何应用此
属性:
##### 实现文字镂空效果
```
html
<div class="backdrop">
<p class="text">Water</p>
<div class="overlay"></div>
</div>
<style>
.backdrop {
position: relative;
}
.text {
font
-size: 7em;
margin: 0;
padding: 0;
z
-index: 1;
}
.overlay {
background
-color: rgba(0,255,255,.1);
mix-blend-mode: multiply; /* 应用了multiply混合模式 */
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
</style>
```
上述代码片段展示了当我们将一个半透明蓝色覆盖在一个文本之上并
设置了 `
mix-blend-mode: multiply` 后所得到的文字镂空样式[^4]。
##### 创建双背景图像合成
另一个有趣的案例是在同一个容器内同时加载两张图片，并利用 `background
-blend-mode` 来控制它们之间的交互方式：
```
css
.
blend {
height: 100vh;
background
-image: url('image1.jpg'), url('image2.jpg');
background
-blend-mode: multiply; /* 使用multiply模式进行两幅图间的融合 */
background
-size: cover;
}
```
这段样式的目的是使两张照片按照指定的比例相乘在一起形成新的色调组合[^3]。
扫一扫
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
