我可以只为 div 的背景图像设置不透明度吗？
Posted
技术标签:
【中文标题】我可以只为 div 的背景图像设置不透明度吗？【英文标题】：Can I set an opacity only to the background image of a div? 【发布时间】：2021-09-01 04:19:47 【问题描述】：假设我有
<div class="myDiv">Hi there</div>
我想输入一个background-image 并给它一个opacity 或0.5——但我希望我写的文字完全不透明（1）。
如果我要这样写 CSS
.myDiv opacity:0.5
一切都将处于低不透明度状态——我不希望这样。
所以我的问题是 – 我怎样才能获得具有完全不透明文本的低不透明度背景图像？
【问题讨论】：
***.com/questions/6624457/… 请注意，我确实有评论（在菲尔的回答下），如果这是首选方式，则显示了一种使用 css 不透明度的方法。 (jsfiddle.net/4tTNZ) 这个answer 更简洁，我相信完全一样。 【参考方案1】：不，这是无法做到的，因为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%;
见test case on 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 上查看测试用例：
Using CSS 2.1 :before Using CSS 3 ::before【讨论】：
在使用 z-index 的负值时，我非常偏执。但是，我无法与结果争论。但是，我会将width: 100%; height: 100%; 添加到.bg，以便ie6 可以将bg 传播到父div 中。 jsfiddle.net/sbGb4/2
我认为我缺少一个 css3 技巧 - 但这也很棒！
@Lollero 好点！ z-index 很痛苦，但是这应该是相对安全的，只要你给父母一个积极的指数。
@Alon 如果您检查我在您的问题帖子下写的评论。我在那里链接到另一个问题，该问题有几个其他选项，包括 rgba 这是 css3 选项。对于老年人来说，这是一个很好的技巧，即.. css-tricks.com/2151-rgba-browser-support
@Alon 我使用::before 伪元素添加了另一种方法。这是您要找的那个吗？【参考方案2】：
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>
【讨论】：
【参考方案3】：所以这是另一种方式：
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
【讨论】：
@jj_：因为当时对linear-gradient 的支持非常有限。我写的接受的答案是 4 岁以上;)
也许您可以添加评论或对您的问题进行一些更新，告知这是现在的新好方法。 4 年后见，有新的更新；）
@jj_：实际上，此解决方案不会使图像透明。它只在上面添加了一个透明度为 50% 的白色层。因此，这不是该问题的有效答案。
我认为我们可以同意它实现了问题的意图，所以是的，它是问题的有效答案。
是的..这个答案几乎是最简单的..否则绝对定位会变得一团糟【参考方案4】：
这可以通过对文本 Hi There... 使用不同的 div 类来完成...
<div class="myDiv">
<div class="bg">
<p> Hi there</p>
</div>
</div>
现在您可以将样式应用于
标签。否则对于 bg 类。 我相信它工作正常
【讨论】：
【参考方案5】：没有一个解决方案对我有用。如果一切都失败了，把图片放到 Photoshop 中并应用一些效果。 5 分钟而不是这么多时间……
【讨论】：
【参考方案6】：我实现了Marcus Ekwall's solution，但能够删除一些东西以使其更简单，它仍然有效。也许是 2017 版的 html/css？
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%;
https://jsfiddle.net/abalter/3te9fjL5/
【讨论】：
这与我的回答中的“辅助 div”相同，唯一的区别是您省略了 z-index（今天的行为可能不同，也可能取决于浏览器） .但相信浏览器按预期运行通常是个坏主意。【参考方案7】：大家好，我做了这个，效果很好
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> 【讨论】：
【参考方案8】：<!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%）
【讨论】：
以上是关于我可以只为 div 的背景图像设置不透明度吗？的主要内容，如果未能解决你的问题，请参考以下文章