请教一个关于css透明度的问题。

xiatianlong
  • 2.2k

如果div的设置了透明度,div里面的文字颜色为白色。这时候字体看起来就“不白了”,我想让文字也“很白”,有办法解决吗?

效果图:

clipboard.png

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    body{
        background-image:url('personal_center.png');
    }
    .div1{
        width:200px;
        height:200px;
        margin:50px auto;
        background-color:#000000;
        opacity:0.5;
    }
    .div2{
        width:200px;
        height:200px;
        margin:50px auto;
        background-color:#000000;
    }
    span{
        color:#ffffff;
        font-size:16px;
        font-weight:bold;
    }
</style>
</head>
<body>
    <div class="div1">
        <span>测试文字</span>
    </div>
    <div class="div2">
        <span>测试文字</span>
    </div>    
</body>
</html>
回复
阅读 2.2k
4 个回答

用背景色,
background: rgba(0, 0, 0, .5);

用opacity的话,子元素也会一起透明。

stardew
  • 6.1k
.div1{
    width:200px;
    height:200px;
    margin:50px auto;
    background: rgba(0, 0, 0, 0.5);
}

透明度一般都转化为rgba格式的,转化方式很简单,16进制。
比如:#abc => a: 10, b: 11, c: 12
10 16^1 + 10 16^0 = 170
11 16^1 + 11 16^0 = 187
12 16^1 + 12 16^0 = 204
background: rgba(170, 187, 204, 0.5);

我的方法比较笨:简单来说:

  • 增加一个专门用来呈现半透明效果的div;

  • 这个div需要和文字所在容器同级;

这样就可以避免透明度属性被继承的问题

答案可以参考楼上的,用rgba,原因是opacity是相乘的

宣传栏