Disons que j'ai

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

Je veux mettre un background-imageet lui donner un opacityde 0.5- mais je veux que le texte que j'ai écrit ait une opacité totale ( 1).

Si j'écrivais le CSS comme ça

.myDiv { opacity:0.5 }

tout sera en faible opacité - et je ne veux pas de ça.

Ma question est donc la suivante: comment puis-je obtenir une image d'arrière-plan à faible opacité avec un texte en pleine opacité?

Non, cela ne peut pas être fait depuis opacity affecte tout l'élément, y compris son contenu, et il n'y a aucun moyen de modifier ce comportement. Vous pouvez contourner ce problème avec les deux méthodes suivantes.

Div secondaire

Ajoutez un autre divélément au conteneur pour contenir l'arrière-plan. C'est la méthode la plus conviviale pour tous les navigateurs et fonctionnera même sur 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%;
}

Voir le cas de test sur jsFiddle

: avant et :: avant pseudo-élément

Une autre astuce consiste à utiliser les pseudo-éléments CSS 2.1 :beforeou CSS 3 ::before. :beforeLe pseudo-élément est pris en charge dans IE à partir de la version 8, tandis que le ::beforepseudo-élément n'est pas du tout pris en charge. Nous espérons que cela sera corrigé dans la version 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;
}

Notes complémentaires

En raison de votre comportement, z-indexvous devrez définir un z-index pour le conteneur ainsi qu'un négatifz-index pour l'image d'arrière-plan.

Cas de test

Voir le cas de test sur jsFiddle:

• Utilisation de CSS 2.1: avant
• Utiliser CSS 3 :: avant

Voici donc un autre moyen:

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>

Cela peut être fait en utilisant la classe div différente pour le texte Hi There ...

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

Vous pouvez maintenant appliquer les styles au

marque. sinon pour la classe bg. Je suis sûr que ça marche bien

J'ai implémenté la solution de Marcus Ekwall mais pu supprimer quelques éléments pour la rendre plus simple et cela fonctionne toujours. Peut-être la version 2017 de 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/

Bonjour à tous, j'ai fait ça et ça a bien fonctionné

	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>

y compris 4 ensembles de nombres le rendrait rgba, pas cmyk, mais dans les deux cas fonctionnerait (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Aucune des solutions n'a fonctionné pour moi. Si tout le reste échoue, récupérez l'image dans Photoshop et appliquez un effet. 5 minutes contre tant de temps là-dessus ...