关于父元素设置opacity后，子元素设置opacity无效问题

最新推荐文章于 2024-11-10 20:25:46 发布

原创最新推荐文章于 2024-11-10 20:25:46 发布 · 2.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习

CSS

博客讲述了在CSS中，子元素会继承父元素的透明度属性，导致设置的子元素不透明无效的问题。作者通过实例展示了如何使用RGBA颜色值避免这种继承，从而实现子元素的独立透明度设置。解决方案是将父元素的color属性改为RGBA，子元素不再继承透明度，保持原本设定的颜色不透明。

问题来源：

最近做一个项目，由于外层p元素字体是半透明的，而内部span元素的字体要求不透明，于是在父元素设置了opacity：0.7，子元素设置opacity：1.0，代码如下。

.detail-top .detail-explain {
	justify-content: space-between;
	margin-top: 50px;
	padding-right: 5%;
	opacity: 0.7;
}
.detail-top .detail-explain span {
	display: block;
	margin-bottom: 10px;
    opacity: 1.0;
	font-size: 24px;
	color: #2A2B34;
	line-height: 30px;
	font-weight: 600;
}

结果发现子元素还是半透明的样式，相当于opacity：1.0没有生效？后面查阅资料才发现，子元素会继承父元素的opacity属性，如果子元素单独设置了opacity那么其真正的结果值是子元素与父元素opacity值的乘积。所以子元素opacity设置为1，其透明度仍然是0.7*1=0.7，（注意opacity的值为0-1，所以不能通过设置opacity为2来使透明度为1）。

解决办法：

在父元素设置color时使用rgba，这样再单独设置子元素的color就不会发生继承问题了，代码如下。

.detail-top .detail-explain {
	justify-content: space-between;
	margin-top: 50px;
	padding-right: 5%;
	color: rgba(82, 84, 101, 0.7);
}
.detail-top .detail-explain span {
	display: block;
	margin-bottom: 10px;
	font-size: 24px;
	color: #2A2B34;
	line-height: 30px;
	font-weight: 600;
}

标签

#html #css #html5