mix-blend-mode
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS mix-blend-mode đặt cách nội dung của một phần tử nên hòa trộn với nội dung của phần tử cha và nền của phần tử.
Try it
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: hard-light;
mix-blend-mode: difference;
<section class="default-example" id="default-example">
<div class="example-container">
<img
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</div>
</section>
.example-container {
background-color: sandybrown;
}
Cú pháp
css
/* Giá trị từ khóa */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
/* Giá trị toàn cục */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
Giá trị
<blend-mode>-
Chế độ hòa trộn sẽ được áp dụng.
plus-darker-
Hòa trộn sử dụng toán tử ghép plus-darker.
plus-lighter-
Hòa trộn sử dụng toán tử ghép plus-lighter. Hữu ích cho hiệu ứng cross-fade (ngăn hiện tượng nhấp nháy không mong muốn khi hai phần tử chồng lên nhau thay đổi độ trong suốt theo hướng ngược lại).
Định nghĩa hình thức
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
| Creates stacking context | yes |
Cú pháp hình thức
mix-blend-mode =
<blend-mode> |
plus-lighter
<blend-mode> =
normal |
darken |
multiply |
color-burn |
lighten |
screen |
color-dodge |
overlay |
soft-light |
hard-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity
Ví dụ
Hiệu ứng của các giá trị mix-blend-mode khác nhau
Dùng mix-blend-mode với HTML
HTML
html
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
CSS
css
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.circle-1 {
background: red;
}
.circle-2 {
background: lightgreen;
left: 40px;
}
.circle-3 {
background: blue;
left: 20px;
top: 40px;
}
.isolate {
isolation: isolate; /* Without isolation, the background color will be taken into account */
position: relative;
}
Kết quả
Dùng mix-blend-mode với SVG
SVG
html
<svg>
<g class="isolate">
<circle cx="40" cy="40" r="40" fill="red" />
<circle cx="80" cy="40" r="40" fill="lightgreen" />
<circle cx="60" cy="80" r="40" fill="blue" />
</g>
</svg>
CSS
css
circle {
mix-blend-mode: screen;
}
.isolate {
isolation: isolate;
} /* Without isolation, the background color will be taken into account */
Kết quả
Dùng mix-blend-mode với văn bản
Ví dụ này sử dụng mix-blend-mode để hòa trộn màu chữ với màu nền của phần tử cha.
HTML
html
<div class="container">
<p>Mostly Harmless</p>
<p class="multiply">Mostly Harmless</p>
<p class="screen">Mostly Harmless</p>
<p class="hard-light">Mostly Harmless</p>
</div>
CSS
css
@import "https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap";
.container {
background-color: blue;
}
p {
font:
4rem "Rubik Moonrocks",
cursive;
font-weight: bold;
color: orange;
padding: 0.5rem;
margin: 0;
}
.multiply {
mix-blend-mode: multiply;
}
.screen {
mix-blend-mode: screen;
}
.hard-light {
mix-blend-mode: hard-light;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Compositing and Blending Module Level 2 # mix-blend-mode |