
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?

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

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:

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

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/

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 & WEB</small>
</div>
</section>

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 %).
9175900cookie-checkKann ich eine Deckkraft nur für das Hintergrundbild eines div festlegen?yes
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