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

查看:80
本文介绍了html - 请教一个关于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>

解决方案

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

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

这篇关于html - 请教一个关于css透明度的问题。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆