的CSS

Question

假设我有

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

我想添加一个background-image并给它opacity 0.5 - 但我希望我写的文字具有完全不透明度（1）。

如果我像这样编写CSS

.myDiv { opacity:0.5 }

一切将处于低不透明度 - 我不希望这样。

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

Answer 1

所以这是另一种方式：

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

Answer 2

不，这是不可能的，因为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和::之前的伪元素

另一个技巧是使用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上的测试用例：

Answer 3

的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>

Answer 4

这可以通过使用文本Hi There ...

的不同div类来完成

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

现在您可以将样式应用于

标记。否则为bg类。我相信它工作正常

Answer 5

这些解决方案都不适合我。如果其他一切都失败了，请将图片添加到Photoshop并应用一些效果。 5分钟与这么多时间相比......

Answer 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/

Answer 7

大家好，我这样做了，效果很好

＆＃13;

	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();
		}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 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的背景图像吗？

8 个答案:

次要div

：before和::之前的伪元素

附加说明

测试用例

的CSS

的HTML