我可以仅对div的背景图像设置不透明度吗？

86

假设我有

<div class="myDiv">Hi there</div>

我想提出一个background-image并给它一个opacity的0.5-但我想，我写的文字将有充分的不透明度（1）。

如果我这样写CSS

.myDiv { opacity:0.5 }

一切都会变得不透明-我不想要那样。

所以我的问题是–如何获得具有完全不透明度文本的低不透明度背景图像？

html  css  background  background-image 
— 阿隆
source
stackoverflow.com/questions/6624457/…请注意，我确实有评论（在Phil的回答下），显示了一种处理CSS不透明度的方法，如果那是首选的方法。（jsfiddle.net/4tTNZ）–乔纳斯
— Joonas
这个答案更为简洁，我相信是完全一样的。
— JohnAllen 2014年

Answers:

102

不，这无法完成，因为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伪元素。:beforeIE从版本8开始支持伪元素，而::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上的测试用例：

— 梅克沃尔
source
2
当我使用带有z-index的负值时，我感到非常偏执。但是，我不能与结果争论。但是，我将添加width: 100%; height: 100%;到，.bg以便ie6可以在父div内传播bg。jsfiddle.net/sbGb4/2
— Joonas
我以为我缺少一个css3技巧-但这也很棒！
— 阿隆
@Lollero好点！z-index是很痛苦的，但是只要您给父母一个正指数，这应该是相对安全的。
— mekwall
@Alon，如果您检查我在“问题”帖子下写的评论。我在那里链接到另一个具有其他几个选项的问题，包括rgba，这是css3选项。这对于年长的人来说是个很好的技巧，例如：css-tricks.com/2151-rgba-browser-support
— Joonas
@Alon我添加了另一个使用::before伪元素的方法。这是您要找的那个吗？
— mekwall
155

所以这是另一种方式：

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
— GrmXque
source
3
@jj_：因为当时对的支持非常有限linear-gradient。我写的已接受答案是4岁以上；）
— mekwall
3
也许您可以在问题中添加评论或进行一些更新，以告知这现在是解决问题的新方法。四年后见您进行新的更新；）
— jj_
@jj_：实际上，此解决方案无法使图像透明。它仅在其上添加一个具有50％透明度的白色层。因此，这不是问题的有效答案。
— mekwall
7
我认为我们可以同意，它达到了问题的目的，所以是的，它是该问题的有效答案。
— 大卫·克拉克
是的..这个答案几乎是最简单的..否则，绝对定位就变得一团糟
— Harkirat Saluja
4

的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）
source
0

这可以通过对文本Hi There ...使用不同的div类来完成。

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

现在，您可以将样式应用于

标签。否则对于bg类。我相信它能正常工作

— Supraja Machavaram
source
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%;
}

https://jsfiddle.net/abalter/3te9fjL5/

— bal
source
1
这和我的答案中的“ Secondary div”相同，唯一的区别是您省略了z-index（今天的行为可能有所不同，并且可能还取决于浏览器）。但是，信任浏览器的行为符合预期通常不是一个好主意。
— mekwall
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 &amp; WEB</small>
</div>
</section>
展开摘要

— 副词
source
0 
<!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％）

— 村民1
source
-1

没有一个解决方案对我有用。如果其他所有操作均失败，则将图片发送至Photoshop并应用一些效果。5分钟，与此相比花了很多时间...

— 用户名
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.