Html 我可以只为 div 的背景图像设置不透明度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7241341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I set an opacity only to the background image of a div?
提问by Alon
Let's say I have
假设我有
<div class="myDiv">Hi there</div>
I want to put a background-imageand give it an opacityof 0.5– but I want that the text I have written will have full opacity (1).
我想提出一个background-image并给它一个opacity的0.5-但我想，我写的文字将有充分的不透明度（1）。
If I would write the CSS like this
如果我像这样写 CSS
.myDiv { opacity:0.5 }
everythingwill be in low opacity – and I don't want that.
一切都将处于低不透明度 - 我不希望那样。
So my question is – How can I get low-opacity background image with full opacity text?
所以我的问题是 – 如何获得带有完全不透明度文本的低不透明度背景图像？
回答by GrmXque
So here is an other way:
所以这是另一种方式：
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
回答by mekwall
Nope, this cannot be done since opacityaffects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.
不，这是无法做到的，因为opacity会影响整个元素，包括其内容，并且无法改变这种行为。您可以使用以下两种方法解决此问题。
Secondary div
二级div
Add another divelement to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.
将另一个div元素添加到容器以保持背景。这是最跨浏览器友好的方法，甚至可以在 IE6 上工作。
HTML
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
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%;
}
:before and ::before pseudo-element
:before 和 ::before 伪元素
Another trick is to use the CSS 2.1 :beforeor CSS 3 ::beforepseudo-elements. :beforepseudo-element is supported in IE from version 8, while the ::beforepseudo-element is not supported at all. This will hopefully be rectified in version 10.
另一个技巧是使用 CSS 2.1:before或 CSS 3::before伪元素。:before从版本 8 开始，IE 支持伪元素，而::before根本不支持伪元素。这有望在版本 10 中得到纠正。
HTML
HTML
<div class="myDiv">
Hi there
</div>
CSS
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;
}
Additional notes
补充说明
Due to the behavior of z-indexyou will have to set a z-index for the container as well as a negative z-indexfor the background image.
由于您的行为，z-index您必须为容器设置 z-index 以及为z-index背景图像设置负数。
Test cases
测试用例
See test case on jsFiddle:
在 jsFiddle 上查看测试用例：
回答by Harsukh Makwana
css
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
html
<div> put your div content</div>
回答by Supraja Machavaram
This can be done by using the different div class for the text Hi There...
这可以通过对文本 Hi There... 使用不同的 div 类来完成。
<div class="myDiv">
<div class="bg">
<p> Hi there</p>
</div>
</div>
Now you can apply the styles to the
现在您可以将样式应用到
tag. otherwise for bg class. I am sure it works fine
标签。否则为 bg 类。我确定它工作正常
回答by user2060451
None of the solutions worked for me. If everything else fails, get the picture to Photoshop and apply some effect. 5 minutes versus so much time on this...
没有一个解决方案对我有用。如果其他一切都失败了，将图片放到 Photoshop 中并应用一些效果。5 分钟与这么多时间相比......
回答by abalter
I implemented Marcus Ekwall's solutionbut was able to remove a few things to make it simpler and it still works. Maybe 2017 version of html/css?
我实施了Marcus Ekwall 的解决方案，但能够删除一些东西以使其更简单并且仍然有效。也许是 2017 版的 html/css？
html:
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:
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%;
}
回答by adragom
Hello to everybody I did this and it worked well
大家好，我做了这个，效果很好
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> 回答by villager1
<!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>
including 4 sets of numbers would make it rgba, not cmyk, but either way would work (rgba= 00000088, cmyk= 0%, 0%, 0%, 50%)
包括 4 组数字将使其成为 rgba，而不是 cmyk，但无论哪种方式都可以工作（rgba= 00000088, cmyk= 0%, 0%, 0%, 50%）
