假设我有
<div class="myDiv">Hi there</div>
background-image 的元素，并且将其透明度设置为 0.5，但我希望元素中的文字保持完全不透明（1）。如果我按照如下方式编写 CSS：
.myDiv { opacity:0.5 }
everything会变成低透明度——我不想要那样。
因此我的问题是 - 如何获得低透明度背景图像和完全不透明文本？
我能否仅为div的背景图像设置不透明度？
107
如果我按照如下方式编写 CSS：
- Alon
2
请注意，我在Phil的答案下面留了评论，展示了使用CSS不透明度设置背景颜色的方法，如果这是首选方法的话。（http://www.jsfiddle.net/4tTNZ） - Joonas
这个答案更加简洁，我相信它完全相同。 - JohnAllen
8个回答
200
所以这里是另一种方法：
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
- GrmXque
11
4因为当时对于
linear-gradient的支持非常有限。我写的被接受的答案已经超过4年了 ;) - mekwall3也许您可以在您的问题中添加一条评论或小小的更新，说明这是现在的新方法。四年后再见，期待新的更新 ;) - Redoman
11我认为我们可以达成共识，它实现了问题的意图，所以对于这个问题而言，是一个有效的答案。 - David Clarke
2是的，这个答案基本上是最简单的了。否则，使用绝对定位会变得混乱。 - Harkirat Saluja
这绝对是解决这个问题最有创意、最直观的方式。与其他选择相比，它也更容易使用，并提供更多的控制。通过允许它成为一个渐变，您可以使底部区域变得更轻，以便更轻松地阅读页脚。 - Brad
显示剩余6条评论
124
不行，这是因为opacity影响整个元素，包括其内容，没有办法改变这种行为。你可以用以下两种方法解决这个问题。
第二个div
在容器中添加另一个div元素来承载背景。这是最兼容各种浏览器的方法，甚至可以在IE6上使用。
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}
查看在 jsFiddle 上的测试用例：链接
:before 和 ::before 伪元素
另一个技巧是使用 CSS 2.1 的 :before 或 CSS 3 的 ::before 伪元素。IE 8 及以上版本支持 :before 伪元素，而 ::before 伪元素则完全不被支持。希望在版本 10 中能够得到纠正。
HTML
<div class="myDiv">
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
}
附加说明
由于 z-index 的行为，您不仅需要为容器设置一个 z-index，还需要为背景图像设置一个负的 z-index。
测试用例
请在 jsFiddle 上查看测试用例：
- mekwall
8
2当涉及到使用z-index的负值时，我非常谨慎。但是，我不能否认结果。然而，我会在
.bg中添加width: 100%; height: 100%;，以便ie6可以将背景扩展到父div内。http://jsfiddle.net/sbGb4/2/ - Joonas我原本认为这里有一个我错过了的 CSS3 技巧，不过这个方法也很好！ - Alon
@Lollero 说得好！
z-index很麻烦，但只要给父元素一个正的索引，这应该是相对安全的。 - mekwall我已经成功地让它工作，完全没有使用
z-index或者:before。请参见下面的答案。 - abalter@abalter 你只是忽略了z-index。你的答案使用了我回答中列在第一位的“次级div”方法。通常信任浏览器处理z-index（如预期）通常不是一个好主意。 - mekwall
显示剩余3条评论
8
css
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
html
<div> put your div content</div>
- Harsukh Makwana
0
大家好，我做了这个，它运行得很好。
var canvas, ctx;
function init() {
canvas = document.getElementById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#bfbfbf'; // #00843D // 118846
ctx.fillRect(0, 0, 490, 490);
ctx.restore();
}section{
height: 400px;
background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
canvas {
width: 100%;
height: 400px;
opacity: 0.9;
}
#text {
position: absolute;
top: 10%;
left: 0;
width: 100%;
text-align: center;
}
.middle{
text-align: center;
}
section small{
background-color: #262626;
padding: 12px;
color: whitesmoke;
letter-spacing: 1.5px;
}
section i{
color: white;
background-color: grey;
}
section h1{
opacity: 0.8;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Metrics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body onload="init();">
<section>
<canvas id="color"></canvas>
<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics & WEB</small>
</div>
</section> - adragom
0
我实现了Marcus Ekwall的解决方案，但是我能够删除一些东西使它变得更简单，并且它仍然有效。也许是html / css的2017版本？
html：
<div id="content">
<div id='bg'></div>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
CSS：
#content {
text-align: left;
width: 75%;
margin: auto;
position: relative;
}
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
opacity: .4;
width: 100%;
height: 100%;
}
- abalter
1
1这与我答案中的“Secondary div”做的一样，唯一的区别是你省略了z-index（可能在今天的浏览器中会有不同的行为，也可能取决于浏览器）。但是相信浏览器会按预期运行通常是一个坏主意。 - mekwall
-1
可以通过为文本使用不同的 div 类来实现，你好...
<div class="myDiv">
<div class="bg">
<p> Hi there</p>
</div>
</div>
现在您可以将样式应用于
标签。否则使用bg类。我相信它能正常工作。
- Supraja Machavaram
-1
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>
包括4组数字将使其成为rgba，而不是cmyk，但无论哪种方式都可以使用（rgba = 00000088，cmyk = 0％，0％，0％，50％）。
- villager1
1
这与不透明度有什么关系？ - IonicMan
-1
没有一个解决方案适用于我。如果其他方法都失败了，将图片导入 Photoshop 并应用一些效果。5 分钟对比这么长时间……
- user2060451
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接