css 半透明

作者：暗夜幽殤发布日期:2025-09-21 浏览:67

/* 设置背景颜色为半透明 */
.background {
    background-color: rgba(255, 255, 255, 0.5); /* 白色，50%透明度 */
}

/* 设置文本颜色为半透明 */
.text {
    color: rgba(0, 0, 0, 0.7); /* 黑色，70%透明度 */
}

/* 使用 opacity 属性设置整个元素的透明度 */
.transparent-element {
    opacity: 0.8; /* 80%透明度 */
}

解释说明：

rgba() 函数：通过 rgba() 可以设置颜色和透明度。前三个参数是红、绿、蓝的颜色值（范围 0-255），第四个参数是透明度（范围 0-1，0 表示完全透明，1 表示完全不透明）。
opacity 属性：用于设置整个元素的透明度。它的值也是在 0 到 1 之间，0 表示完全透明，1 表示完全不透明。注意，opacity 会影响整个元素及其子元素。
应用场景：半透明效果常用于背景颜色、文本颜色或某些需要视觉层次感的设计中。

上一篇：style css

下一篇：css 省略号表示溢出文本