Nehmen wir an, ich habe

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

Ich möchte ein setzen background-imageund ein opacityvon geben 0.5- aber ich möchte, dass der Text, den ich geschrieben habe, volle Deckkraft hat ( 1).

Wenn ich das CSS so schreiben würde

.myDiv { opacity:0.5 }

alles wird in geringer Deckkraft sein - und das will ich nicht.

Meine Frage lautet also: Wie kann ich ein Hintergrundbild mit geringer Deckkraft mit vollem Deckkrafttext erhalten?

Nein, dies ist nicht möglich, da sich dies opacityauf das gesamte Element einschließlich seines Inhalts auswirkt und es keine Möglichkeit gibt, dieses Verhalten zu ändern. Sie können dies mit den beiden folgenden Methoden umgehen.

Sekundär div

Fügen Sie divdem Container ein weiteres Element hinzu, um den Hintergrund aufzunehmen. Dies ist die browserübergreifendste Methode und funktioniert auch unter 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%;
}

Siehe Testfall auf jsFiddle

: vor und :: vor Pseudoelement

Ein weiterer Trick besteht darin, die Pseudoelemente CSS 2.1 :beforeoder CSS 3 zu ::beforeverwenden. :beforePseudoelement wird im IE ab Version 8 unterstützt, während das ::beforePseudoelement überhaupt nicht unterstützt wird. Dies wird hoffentlich in Version 10 behoben.

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

Zusätzliche Bemerkungen

Aufgrund des Verhaltens von müssen z-indexSie einen Z-Index für den Container sowie ein Negativ z-indexfür das Hintergrundbild festlegen.

Testfälle

Siehe Testfall auf jsFiddle:

• Verwenden von CSS 2.1: vorher
• Vorher CSS 3 :: verwenden

Also hier ist ein anderer Weg:

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

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>

Dies kann durch Verwendung der verschiedenen div-Klasse für den Text Hi There ...

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

Jetzt können Sie die Stile auf die anwenden

Etikett. sonst für bg klasse. Ich bin sicher, dass es gut funktioniert

Ich habe die Lösung von Marcus Ekwall implementiert , konnte jedoch einige Dinge entfernen, um sie einfacher zu gestalten, und sie funktioniert immer noch. Vielleicht 2017 Version von 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/

Hallo an alle, die ich gemacht habe und es hat gut funktioniert

	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> 

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

Das Einschließen von 4 Zahlenreihen würde es zu rgba machen, nicht zu cmyk, aber so oder so würde es funktionieren (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%).

Keine der Lösungen hat bei mir funktioniert. Wenn alles andere fehlschlägt, bringen Sie das Bild in Photoshop und wenden Sie einen Effekt an. 5 Minuten gegen so viel Zeit ...