Diciamo che l'ho fatto

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

Voglio mettere un background-imagee dare un opacitydi 0.5- ma voglio che il testo che ho scritto avrà piena opacità ( 1).

Se scrivessi il CSS in questo modo

.myDiv { opacity:0.5 }

tutto sarà a bassa opacità - e non lo voglio.

Quindi la mia domanda è: come posso ottenere un'immagine di sfondo a bassa opacità con testo a piena opacità?

No, questo non può essere fatto poiché opacityinfluisce sull'intero elemento incluso il suo contenuto e non c'è modo di alterare questo comportamento. Puoi aggirare questo problema con i due metodi seguenti.

Div. Secondario

Aggiungi un altro divelemento al contenitore per mantenere lo sfondo. Questo è il metodo più compatibile con tutti i browser e funzionerà anche su 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%;
}

Vedi il test case su jsFiddle

: before e :: before pseudo-elemento

Un altro trucco è usare gli pseudo-elementi CSS 2.1 :beforeo CSS 3 ::before. :beforepseudo-elemento è supportato in IE dalla versione 8, mentre lo ::beforepseudo-elemento non è supportato affatto. Si spera che questo venga risolto nella versione 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;
}

Note aggiuntive

A causa del tuo comportamento z-indexdovrai impostare uno z-index per il contenitore e un negativo z-indexper l'immagine di sfondo.

Casi test

Vedi il test case su jsFiddle:

• Utilizzando CSS 2.1: prima
• Utilizzando CSS 3 :: prima

Quindi ecco un altro modo:

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>

Questo può essere fatto usando la diversa classe div per il testo Hi There ...

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

Ora puoi applicare gli stili al file

etichetta. altrimenti per la classe bg. Sono sicuro che funzioni bene

Ho implementato la soluzione di Marcus Ekwall ma sono riuscito a rimuovere alcune cose per renderlo più semplice e funziona ancora. Forse la versione 2017 di 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/

Ciao a tutti, l'ho fatto e ha funzionato bene

	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>

includere 4 serie di numeri lo renderebbe rgba, non cmyk, ma in entrambi i casi funzionerebbe (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Nessuna delle soluzioni ha funzionato per me. Se tutto il resto fallisce, porta l'immagine su Photoshop e applica qualche effetto. 5 minuti contro così tanto tempo su questo ...