背景图片 透明 文字不透明

x1ngoo
  • 234

背景图片透明(不是背景色) 文字不透明 css该怎么实现?

评论
阅读 5.1k
5 个回答
✓ 已被采纳

用两个标签实现,一个image标签的position设置为absolute做背景图,然后另外一个div做前景也是position设置为absolute,叠加到上面就好了。

单独的CSS backgrongd-img是无法实现的。 你可以背景图片固定定位然后单独给图片设置透明,然后再写一个div浮到图片上面。来实现效果。

你要求背景图片透明,文字不透明,感觉你是给div加了个背景图片,然后文字就包含在这个div里了。很明显,这个div是透明的,里面文字就是透明啦,不想文字透明的话,就把背景图片和文字区分开不同的层就可以了,然后只给背景图片加透明度。我这里写的img,当然你也可以换成div。
感觉是小白,就代码整个给你贴上来了,另外加了背景颜色的透明度,不要可以去掉。

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title></title>
    <style type="text/css">
        .outer {
            position: relative;
            height: 300px;
            background-color: rgba(0,0,0,.1);/*透明的背景颜色*/
        }
        .outer img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            max-width: 100%;
            margin: auto;
            z-index: 1;
            opacity: .6;
        }
        .inner {
            color: #000;
        }
        
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
        我是字体字体
    </div>
    <img src="https://img1.360buyimg.com/da/jfs/t7039/274/791294517/78107/eaf17e0c/5979a8a5Ne076f8ef.jpg">
</div>
</body>
</html>

感觉sf的编辑格式好奇怪,第一次用

这个的话css好像是无法实现的,你可以通过ps去改变背景图片的透明度啊

背景图写在img标签里,绝对定位,大小撑满整个容器,给img加css样式,opacity属性

宣传栏