background-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 â¨2020å¹´1æâ©.
æ¦è¿°
background-blend-mode CSS å±æ§å®ä¹è¯¥å
ç´ çèæ¯å¾çï¼ä»¥åèæ¯è²å¦ä½æ··åã
æ··å模å¼åºè¯¥æbackground-image CSS å±æ§åæ ·ç顺åºå®ä¹ãå¦ææ··å模å¼æ°éä¸èæ¯å¾åçæ°éä¸ç¸çï¼å®ä¼è¢«æªåè³ç¸ççæ°éã
| åå§å¼ | normal |
|---|---|
| éç¨å ç´ | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | Not animatable |
è¯æ³
css
/* åå¼ */
background-blend-mode: normal;
/* åå¼ï¼ä¸ä¸ªå¼å¯¹åºä¸ä¸ªèæ¯ */
background-blend-mode: darken, luminosity;
/* å
¨å±å¼ */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;
å¼
<blend-mode>-
ä¸ä¸ªå®ä¹æ··åç模å¼ï¼å¯ä»¥æå¤ä¸ªå¼ï¼ç¨éå·é´éã
å½¢å¼å®ä¹
| åå§å¼ | normal |
|---|---|
| éç¨å ç´ | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | Not animatable |
å½¢å¼è¯æ³
background-blend-mode =
<mix-blend-mode>#
示ä¾
css
#div {
width: 300px;
height: 300px;
background: url("br.png"), url("tr.png");
background-blend-mode: screen;
}
js
document.getElementById("select").onchange = function (event) {
document.getElementById("div").style.backgroundBlendMode =
document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
è§è
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |