HTML/CSS 订阅所有【HTML/CSS】的日志

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

编辑:dnawo 日期:2022-07-19

字体大小: 小 中 大
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

上一篇: 基于CSS3属性Animation和transform实现类似翻书效果[转]
下一篇: 杭州快狗打车司机加盟招募条件和加入方法详解
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 2365
发表评论
请登录后再发表评论！