Kann ich eine Deckkraft nur für das Hintergrundbild eines Div festlegen?

85

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?

Alon
quelle
stackoverflow.com/questions/6624457/… Beachten Sie, dass ich dort einen Kommentar habe (unter Phils Antwort), der einen Weg zeigt, dies mit CSS-Deckkraft zu tun, wenn dies der bevorzugte Weg ist. ( jsfiddle.net/4tTNZ )
Joonas
Diese Antwort ist viel prägnanter und ich glaube, sie ist genau die gleiche.
JohnAllen

Antworten:

99

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:

Mekwall
quelle
2
Ich bin super paranoid, wenn es darum geht, negative Werte mit Z-Index zu verwenden. Aber ich kann nicht mit Ergebnissen streiten. Allerdings würde ich dem hinzufügen width: 100%; height: 100%;, .bgdamit ie6 das bg innerhalb des übergeordneten div verteilen kann. jsfiddle.net/sbGb4/2
Joonas
Ich dachte, es gibt einen CSS3-Trick dafür, den ich vermisse - aber das ist auch großartig!
Alon
@Lollero guter Punkt! z-indexist ein Schmerz, aber dies sollte relativ sicher sein, solange Sie dem Elternteil einen positiven Index geben.
Mekwall
@Alon, wenn Sie diesen Kommentar überprüfen, den ich unter Ihrem Fragenbeitrag geschrieben habe. Ich habe dort einen Link zu einer anderen Frage, die mehrere andere Optionen hat, einschließlich rgba. Dies ist die CSS3-Option. Hier ist ein ziemlich guter Trick für ältere Leute,
Joonas
@Alon Ich habe eine andere Methode mit dem Pseudoelement hinzugefügt ::before. War dies derjenige, den Sie gesucht haben?
Mekwall
150

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");
GrmXque
quelle
3
@jj_: Weil es zu der Zeit nur sehr begrenzte Unterstützung für gab linear-gradient. Die akzeptierte Antwort, die ich schrieb, ist über 4 Jahre alt;)
Mekwall
3
Vielleicht könnten Sie Ihrer Frage einen Kommentar oder ein kleines Update hinzufügen und mitteilen, dass dies jetzt der neue gute Weg ist, dies zu tun.
Wir
@jj_: Tatsächlich macht diese Lösung das Bild nicht transparent. Es wird nur eine weiße Ebene mit 50% Transparenz hinzugefügt. Daher ist es keine gültige Antwort auf die Frage.
Mekwall
6
Ich denke, wir können uns darauf einigen, dass es die Absicht der Frage erreicht, also ist es eine gültige Antwort auf die Frage.
David Clarke
Ja ... diese Antwort ist so ziemlich die einfachste da draußen. Sonst wird die Positionierung mit Absolut da draußen
durcheinander
4

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>
Harsukh Makwana
quelle
0

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

Supraja Machavaram
quelle
0

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/

abalter
quelle
1
Dies geschieht genauso wie das "Secondary Div" in meiner Antwort, mit dem einzigen Unterschied, dass Sie den Z-Index weggelassen haben (es ist möglich, dass sich dies heute anders verhält und auch vom Browser abhängt). Es ist jedoch normalerweise eine schlechte Idee, dem Browser zu vertrauen, dass er sich wie erwartet verhält.
Mekwall
0

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> 

Adragom
quelle
0
<!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%).

Dorfbewohner1
quelle
-1

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

user2060451
quelle