在HTML页面样式开发中，opacity是控制元素透明度的常用属性，取值从0到1，0表示完全透明，1表示完全不透明。不少开发者给父元素设置opacity后，会发现子元素也出现了相同的透明效果，即便子元素单独设置了不透明的颜色也无法生效，这是由opacity的继承特性导致的。
opacity属性的继承特性原理
opacity属性具有继承性，当给父元素设置opacity值时，这个透明效果会作用于父元素的所有后代元素，且后代元素无法通过设置自己的opacity值来覆盖父元素的透明效果，只能在此基础上再做调整。比如父元素opacity设为0.5，子元素opacity设为1，最终子元素的透明度还是0.5，因为子元素的opacity是相对于父元素的透明比例计算的。
我们可以通过一段简单的代码来验证这个特性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
width: 200px;
height: 200px;
background-color: #ff0000;
opacity: 0.5;
}
.child {
width: 100px;
height: 100px;
background-color: #00ff00;
/* 即使子元素设置opacity为1，依然会继承父元素的透明效果 */
opacity: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
解决父元素透明影响子元素的方法
方法一：使用rgba设置背景透明
如果只是需要父元素的背景透明，不需要整体元素透明，可以使用rgba颜色模式来设置背景，rgba的第四个参数就是透明度，取值范围0到1，这种方式只会影响背景的透明度，不会传递给子元素。
.parent {
width: 200px;
height: 200px;
/* 第四个参数0.5表示背景50%透明，不会影响子元素 */
background-color: rgba(255, 0, 0, 0.5);
}
.child {
width: 100px;
height: 100px;
background-color: #00ff00;
/* 子元素背景完全不透明 */
opacity: 1;
}
方法二：使用伪元素承载透明背景
如果需要父元素的背景透明，同时父元素本身可能还有其他内容，可以使用伪元素<::before>或者<::after>来设置透明背景，把伪元素的层级放到内容下方，这样父元素的内容就不会受到透明效果的影响。
.parent {
width: 200px;
height: 200px;
position: relative;
}
/* 用伪元素设置透明背景 */
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff0000;
opacity: 0.5;
z-index: -1;
}
.child {
width: 100px;
height: 100px;
background-color: #00ff00;
}
方法三：分离父子元素的层级结构
如果条件允许，可以把原本的父子元素结构调整为兄弟元素，通过定位让透明元素作为背景层，内容元素作为前景层，这样两者没有嵌套关系，就不会出现透明继承的问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
position: relative;
width: 200px;
height: 200px;
}
.bg {
width: 100%;
height: 100%;
background-color: #ff0000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
.content {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #00ff00;
}
</style>
</head>
<body>
<div class="container">
<div class="bg"></div>
<div class="content"></div>
</div>
</body>
</html>
不同方案的选择建议
如果只需要背景透明，优先选择rgba方案，代码最简单，兼容性也比较好。如果需要父元素整体有透明效果但不想影响子元素，伪元素方案更合适。如果页面结构允许调整，分离层级的方案可以避免很多样式冲突问题。开发者可以根据实际的业务场景选择对应的解决方式，避免opacity继承带来的显示异常。