在CSS样式开发中，给父元素设置opacity属性实现半透明效果时，子元素会默认继承父元素的透明度，导致子元素内容也变得模糊，这不符合很多设计场景的需求。我们可以通过以下几种方式避免这个问题。
使用RGBA或HSLA设置父元素背景色
如果父元素的透明效果仅需要作用于背景色，不需要影响内容和其他子元素，可以直接使用rgba()或者hsla()函数来定义背景色，这两个函数支持单独设置颜色的透明度，不会影响子元素的渲染。
下面是具体的代码示例：
/* 父元素使用rgba设置背景透明度，子元素不受影响 */
.parent {
width: 300px;
height: 200px;
/* 第四个参数0.5表示背景色透明度为50%，仅作用于背景 */
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
}
.child {
width: 200px;
height: 100px;
background-color: #ffffff;
color: #333333;
text-align: center;
line-height: 100px;
}
对应的HTML结构如下：
<div class="parent">
<div class="child">我是子元素，不会变透明</div>
</div>
使用伪元素承载透明背景
如果父元素需要同时设置背景图和透明度，或者需要更复杂的透明效果，可以给父元素添加一个伪元素::before或者::after，将透明背景设置在伪元素上，父元素本身不设置透明度，这样子元素就不会受到影响。
实现的核心思路是让伪元素作为背景层，覆盖在父元素的底层，子元素放在父元素的上层，层级通过z-index控制。
.parent {
width: 300px;
height: 200px;
position: relative;
padding: 20px;
/* 父元素本身不设置透明度 */
}
/* 伪元素作为背景层，设置透明效果 */
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
z-index: -1;
}
.child {
width: 200px;
height: 100px;
background-color: #ffffff;
color: #333333;
text-align: center;
line-height: 100px;
position: relative;
z-index: 1;
}
使用background-blend-mode混合模式（特定场景适用）
如果父元素的背景是纯色或者简单的渐变，也可以尝试使用background-blend-mode属性配合半透明的背景色实现效果，不过这种方式适用场景有限，需要根据实际需求选择。
.parent {
width: 300px;
height: 200px;
/* 底层背景色 */
background-color: rgba(0, 0, 0, 0.5);
/* 叠加的白色背景，通过混合模式实现半透明效果 */
background-image: linear-gradient(#ffffff, #ffffff);
background-blend-mode: overlay;
padding: 20px;
}
.child {
width: 200px;
height: 100px;
background-color: #ffffff;
color: #333333;
text-align: center;
line-height: 100px;
}
不同方案的选择建议
我们可以根据实际场景选择合适的方案：
- 如果只需要背景色透明，优先选择
rgba()方案，代码最简单，兼容性也最好。 - 如果需要背景图加透明效果，或者父元素本身有其他透明相关需求，选择伪元素方案更灵活。
background-blend-mode方案仅适合简单的背景混合场景，兼容性稍弱，使用前需要确认目标浏览器的支持情况。
需要注意的是，opacity属性是作用于元素整体包括所有子元素的，只要父元素设置了opacity且小于1，子元素一定会继承这个透明度，所以要避免直接给需要保留子元素不透明的父元素设置opacity属性。