木子屋
 

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

作者: dnawo

日期: 2022-07-19 10:15 AM

分类: HTML/CSS

内容: 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)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.596 ms

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

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.596 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.596 ms