css背景透明度不影响文字

/* 设置背景透明度不影响文字的示例代码 */

/* 1. 使用 rgba 设置背景颜色 */
.container {
    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色为白色，透明度为 50% */
    color: black; /* 文字颜色为黑色 */
}

/* 2. 使用 opacity 设置元素整体透明度（会影响文字） */
/* 不推荐这种方式，因为会同时影响背景和文字的透明度 */
.transparent-element {
    opacity: 0.5;
    background-color: white;
    color: black;
}

/* 3. 使用 ::before 或 ::after 伪元素设置背景透明度 */
.background-transparent {
    position: relative;
    color: black;
}

.background-transparent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色为白色，透明度为 50% */
    z-index: -1; /* 确保背景在文字下方 */
}

解释说明：

1. 使用 rgba 设置背景颜色：通过 rgba 函数可以设置背景颜色的透明度，而不会影响文字的透明度。rgba 的第四个参数是透明度值，范围从 0（完全透明）到 1（完全不透明）。

2. 使用 opacity 设置元素整体透明度：虽然可以使用 opacity 属性来设置整个元素的透明度，但这会影响到背景和文字，因此不推荐这种方式。

3. 使用 ::before 或 ::after 伪元素：通过伪元素创建一个独立的背景层，并将其放置在文字下方，这样可以只设置背景的透明度而不影响文字。