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

背景图片 透明 文字不透明

kumfo

6.7k33256

发布于
2017-07-31

✓ 已被采纳

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

魏其上

19811433

发布于
2017-07-31

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

Vinci

kumfo

你要求背景图片透明，文字不透明，感觉你是给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的编辑格式好奇怪，第一次用

ヾ旧熙光

815

发布于
2017-07-31

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