Puis-je définir une opacité de l'image de fond d'un div?

Disons que j'ai

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

Je veux mettre un background-image et de donner une opacity de 0.5 – mais je veux que le texte que j'ai écrit plein d'opacité (1).

Si je voulais écrire le CSS comme ceci

.myDiv { opacity:0.5 }

tout sera en faible opacité – et je n'en veux pas.

Donc ma question est – Comment puis-je obtenir à faible opacité de l'image de fond avec plein de texte opacité?

stackoverflow.com/questions/6624457/... a Noter que je fais des commentaire ( en vertu de Phil réponse ) montrant un moyen de le faire avec du css opacité, si c'est la voie préférée. ( jsfiddle.net/4tTNZ )
Cette répondre est beaucoup plus succinct et je crois, c'est exactement le même.

InformationsquelleAutor Alon | 2011-08-30

83

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

Secondaire div

Ajouter un autre div élément du conteneur pour l'arrière-plan. C'est le plus cross-browser convivial méthode et fonctionne 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 cas de test sur jsFiddle

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

Une autre astuce est d'utiliser le CSS 2.1 :before ou CSS 3 ::before pseudo-éléments. :before pseudo-élément est pris en charge dans IE à partir de la version 8, tandis que le ::before pseudo-élément n'est pas 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 du comportement de z-index vous devez définir un z-index pour le conteneur ainsi que d'un négatif z-index pour l'image de fond.

Cas de Test

Voir les cas de test sur jsFiddle:
- À l'aide de CSS 2.1 :avant
- À l'aide de CSS 3 ::avant
- Je suis super parano quand il s'agit de l'utilisation de valeurs négatives avec z-index.. mais, je ne peux pas discuter avec les résultats. Howevveer, je voudrais ajouter width: 100%; height: 100%; à la .bg de sorte que ie6 peut se propager le bg à l'intérieur de la div parent. jsfiddle.net/sbGb4/2
- Je pensais qu'il y est un css3 astuce pour cela que je suis en manque, mais c'est trop grand!
- bon point! z-index est une douleur, mais ce devrait être relativement en sécurité aussi longtemps que vous donnez à la mère un indice positif.
- si vous cochez la case commentaire que j'ai écrit sous votre Question post. J'ai un lien il y a une autre question qui a plusieurs autres options, y Compris rgba Qui est le css3 option. Heres assez bon truc pour les vieux ie.. css-tricks.com/2151-rgba-browser-support
- J'ai ajouté une autre méthode à l'aide de la ::before pseudo-élément. Est-ce que vous recherchez?
- J'ai eu cela fonctionne complètement sans l' z-index ou la :before. Voir la réponse ci-dessous.
- Vous avez seulement omis de z-index. Votre réponse utilise le Secondaire "div" qui apparaît en premier dans ma réponse. De confiance du navigateur pour gérer les z-index (comme prévu) est généralement pas une bonne idée.
InformationsquelleAutor mekwall
113

Voici donc une autre façon:
```
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
```
- pourquoi c'est pas marqué comme étant la bonne réponse?
- Parce qu'à l'époque il y avait très peu de soutien pour linear-gradient. L'on a accepté la réponse que j'ai écrit est de plus de 4 ans 😉
- Vous pourriez peut-être ajouter un commentaire ou une petite mise à jour à votre question, l'informant que c'est maintenant la bonne nouvelle façon de le faire. Voyez-vous dans 4 ans pour une nouvelle mise à jour 😉
- En fait, cette solution n'est pas faire de l'image transparente. Il ajoute une couche de blanc avec 50% de transparence sur le haut. Par conséquent, il n'est pas une réponse valable à la question.
- Je pense que nous pouvons convenir qu'il permet d'atteindre le but de la question, donc oui c'est une réponse valable à la question.
- ouais.. cette réponse assez beaucoup est le plus simple là-bas.. d'autre avec un positionnement absolu devient désordre il y
- une bonne solution qui a travaillé avec plusieurs images d'arrière-plan
- C'est de loin la plus créative, intuitive façon de résoudre ce problème. Il est aussi BEAUCOUP plus facile à utiliser que les solutions de rechange et vous offre plus de contrôle. En lui permettant d'être un dégradé, vous pouvez faire de la région du bas plus légers afin de le pieds de page peuvent être lu plus facilement.
- Pas "pure" de l'opacité dans le sens, mais ouais c'est la meilleure réponse. Très propre et simple. L'on a accepté la réponse est trop désuet et maladroit pour 2018.
- Malheureusement, cela ne fonctionnera pas si vous avez besoin de soutien IE9
- Doit être accepté de répondre.
InformationsquelleAutor GrmXque

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>

InformationsquelleAutor Harsukh Makwana

0

Cela peut être fait en utilisant les différents div class pour le texte Salut...
```
<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>
```
Maintenant, vous pouvez appliquer des styles à la

tag. sinon pour le bg de la classe.
Je suis sûr qu'il fonctionne bien

InformationsquelleAutor Supraja Machavaram
0

Aucune des solutions n'a fonctionné pour moi. Si tout le reste échoue, obtenir de l'image dans Photoshop et de les appliquer quelques effets. 5 minutes contre autant de temps sur ce...

InformationsquelleAutor user2060451

J'ai mis en place Marcus Ekwall de la solution mais a été capable d'enlever un peu de choses pour le rendre plus simple et il fonctionne toujours. Peut-être en 2017, la version 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/

C'est faire la même chose que le Secondaire "div" dans ma réponse, avec la seule différence étant que vous avez omis le z-index (il est possible que ce comportement est différent aujourd'hui, et peut également dépendre du navigateur). Mais en faisant confiance au navigateur de se comporter comme prévu, c'est généralement une mauvaise idée.

InformationsquelleAutor abalter

Bonjour à tout le monde, je l'ai fait et ça a bien fonctionné

JS:

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

CSS:

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:

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

InformationsquelleAutor adragom

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

dont 4 séries de chiffres rendrait rgba, pas cmjn, mais de toute façon serait de travailler (rgba= 00000088, cmjn= 0%, 0%, 0%, 50%)

InformationsquelleAutor villager1

Vous devez vous connecter pour publier un commentaire.

Secondaire div

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

Notes complémentaires

Cas de Test

css

html