控制元素透明度:
使用 CSS 的 opacity
属性可以控制元素的透明度。取值范围为 0~1,0 表示完全透明,1 表示完全不透明。例如,将一个元素设置为半透明可以这样写:
.element {
opacity: 0.5; /* 设置透明度为 50% */
}
混合模式:
使用 CSS 的 mix-blend-mode
属性可以控制元素的混合模式,即指定元素与其背景之间的混合方式。常见的混合模式取值有 multiply
(正片叠底)、screen
(滤色)、overlay
(叠加)等等。例如,将一个元素设置为与背景正片叠底混合可以这样写:
.element {
mix-blend-mode: multiply; /* 混合模式为正片叠底 */
}
需要注意的是,mix-blend-mode
属性只对非固定定位元素(position: static/relative/absolute
)和设置了 z-index
的固定定位元素(position: fixed/sticky
)有效。