DIV使用opacity设置透明后子元素不能取消透明解决方法

👤 dnawo 📅 2022-07-19 👁 3227 👍 0 💬 0 🔄 来源：本站原创

DIV使用opacity设置透明后，子元素也跟着一起透明，结果导致DIV里边的文字看不清，尝试给子元素设置opacity: 1，发现不能取消透明：

<style>
	div{background-color: #000; opacity: 0.5;}
	span{opacity: 1;}
</style>

<div>
	<span>hello,world.</span>
</div>

将opacity放在background-color中设置可解决此问题：

<style>
	div{background-color: rgb(0, 0, 0, 0.5);}
</style>

<div>
	<span>hello,world.</span>
</div>

相关链接

[1].CSS的opacity设置背景透明字体不透明：https://blog.csdn.net/qq_52070860/article/details/124374739

暂无评论。

评论（0）