使用css设置图片背景透明，文字不透明

最新推荐文章于 2023-04-11 17:43:29 发布

半夏ing

最新推荐文章于 2023-04-11 17:43:29 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Fiona_lms/article/details/53692877

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、必须建立父子关系，把文字(儿子)单独放在一个容器里面；
2、background:rgba(),可以实现背景透明文字不透明但是ie8 不支持background:rgba(); 如果不考虑ie 8 我们可以直接rgba就解决；
3、贴代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>opacity</title>
    <style>
        .demo{
            background:#2FA89F ;/*必须写，因为ie8 不认识rgba*/
            background: rgba(47, 168, 159,0.2);
            color: #000;
            zoom: 1;
            filter:Alpha(opacity=20);
        }
        .demo p{
            position: relative;
        }
    </style>
</head>
<body>
<div class="demo">
    <p>背景透明，文字不透明</p>
</div>
</body>
</html>