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

Lesezeit: 7 Minuten

Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
Alon

Sagen wir, ich habe

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

Ich möchte ein setzen background-image und gib ihm ein opacity von 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 möchte ich nicht.

Meine Frage ist also: Wie kann ich ein Hintergrundbild mit geringer Deckkraft und Text mit voller Deckkraft erhalten?

  • stackoverflow.com/questions/6624457/… Beachten Sie, dass ich dort einen Kommentar (unter Phils Antwort) habe, der einen Weg zeigt, dies mit CSS-Opazität zu tun, wenn dies der bevorzugte Weg ist. ( jsfiddle.net/4tTNZ )

    – Jonas

    30. August 2011 um 9:53 Uhr


  • Diese Antwort ist viel prägnanter und meiner Meinung nach genau gleich.

    – JohnAllen

    19. April 2014 um 20:15 Uhr


Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
GrmXque

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");

  • @jj_: Denn damals gab es nur sehr begrenzte Unterstützung für linear-gradient. Die akzeptierte Antwort, die ich geschrieben habe, ist über 4 Jahre alt;)

    – mekwand

    16. Dezember 2015 um 10:31 Uhr

  • Vielleicht könnten Sie Ihrer Frage einen Kommentar oder ein kleines Update hinzufügen und darüber informieren, dass dies jetzt der neue gute Weg ist, dies zu tun. Wir sehen uns in 4 Jahren für ein neues Update 😉

    – JfredoJ

    17. Dezember 2015 um 11:48 Uhr

  • @jj_: Tatsächlich macht diese Lösung das Bild nicht transparent. Es fügt nur eine weiße Ebene mit 50% Transparenz darüber hinzu. Daher ist es keine gültige Antwort auf die Frage.

    – mekwand

    26. Januar 2016 um 14:38 Uhr

  • Ich denke, wir können uns darauf einigen, dass es die Absicht der Frage erfüllt, also ja, es ist eine gültige Antwort auf die Frage.

    – David Clarke

    10. Februar 2016 um 8:49 Uhr

  • ja .. diese Antwort ist so ziemlich die einfachste da draußen .. sonst wird die Positionierung mit absolut zu einem Chaos da draußen

    – Harkirat Saluja

    4. Juni 2016 um 6:30 Uhr

1646266328 695 Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
mekwand

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

Sekundär div

Neue hinzufügen div -Element zum Container, um den Hintergrund aufzunehmen. Dies ist die Cross-Browser-freundlichste Methode und funktioniert sogar auf 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%;
}

Sehen Testfall auf jsFiddle

:before und ::before Pseudo-Element

Ein weiterer Trick ist die Verwendung von CSS 2.1 :before oder CSS3 ::before Pseudo-Elemente. :before Pseudo-Element wird im IE ab Version 8 unterstützt, während das ::before Pseudo-Element wird überhaupt nicht unterstützt. 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 z-index Sie müssen einen Z-Index für den Container sowie ein Negativ festlegen z-index für das Hintergrundbild.

Testfälle

Siehe Testfall auf jsFiddle:

  • Ich bin super paranoid, wenn es darum geht, negative Werte mit dem Z-Index zu verwenden. Aber ich kann die Ergebnisse nicht bestreiten. Allerdings würde ich hinzufügen width: 100%; height: 100%; zum .bg damit ie6 das bg innerhalb des übergeordneten div verteilen kann. jsfiddle.net/sbGb4/2

    – Jonas

    30. August 2011 um 10:20 Uhr

  • Ich dachte, es gibt einen CSS3-Trick dafür, den ich vermisse – aber das ist auch großartig!

    – Allon

    30. August 2011 um 11:07 Uhr


  • @Lollero guter Punkt! z-index ist ein Schmerz, aber das sollte relativ sicher sein, solange Sie dem Elternteil einen positiven Index geben.

    – mekwand

    30. August 2011 um 12:22 Uhr


  • @Alon, wenn Sie diesen Kommentar überprüfen, den ich unter Ihrem Frageposten geschrieben habe. Ich habe dort einen Link zu einer anderen Frage, die mehrere andere Optionen hat, einschließlich rgba, was die CSS3-Option ist. Hier ist ein ziemlich guter Trick für ältere, dh.. css-tricks.com/2151-rgba-browser-support

    – Jonas

    30. August 2011 um 12:33 Uhr

  • @Alon Ich habe eine andere Methode mit dem hinzugefügt ::before Pseudo-Element. War das der, den Sie gesucht haben?

    – mekwand

    30. August 2011 um 12:35 Uhr


Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
Harsukh Makwana

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 die Verwendung der verschiedenen div-Klassen für den Text Hallo dort…

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

Jetzt können Sie die Stile auf die anwenden

Schild. ansonsten für bg-klasse. Ich bin sicher, es funktioniert gut

1646266328 613 Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
abändern

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

  • Dies macht dasselbe 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). Aber darauf zu vertrauen, dass sich der Browser wie erwartet verhält, ist normalerweise eine schlechte Idee.

    – mekwand

    29. Mai 2017 um 9:37 Uhr


1646266329 188 Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
aragom

Hallo an alle Ich habe das gemacht 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> 

  • Dies macht dasselbe 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). Aber darauf zu vertrauen, dass sich der Browser wie erwartet verhält, ist normalerweise eine schlechte Idee.

    – mekwand

    29. Mai 2017 um 9:37 Uhr


1646266330 258 Kann ich eine Deckkraft nur fur das Hintergrundbild eines div
Dorfbewohner1

<!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 Zahlensätzen würde es zu rgba machen, nicht zu cmyk, aber beide Wege würden funktionieren (rgba= 00000088, cmyk= 0 %, 0 %, 0 %, 50 %).

917590cookie-checkKann ich eine Deckkraft nur für das Hintergrundbild eines div festlegen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy