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

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

效果图：

示例代码：

<!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>

html css

阅读 3k

4 个回答

得票最新

请叫我禽兽

1.5k1310

发布于
2017-02-07

✓ 已被采纳

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

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

stardew

6.1k41633

发布于
2017-02-07

更新于
2017-02-07

.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);