Mit CSS und CSS3 können Sie viele Dinge tun, doch das Einstellen einer Opazität für einen CSS-Hintergrund gehört nicht dazu. Wenn Sie jedoch kreativ werden, gibt es eine Menge kreativer Möglichkeiten, es aussehen zu lassen, als würden Sie die Opazität des CSS-Hintergrundbildes ändern. Beide folgenden Methoden haben eine hervorragende Browserunterstützung bis hinunter zu Internet Explorer 8.
Methode 1: Verwenden absoluter Positionierung und eines Bildes
Diese Methode ist genau so, wie sie klingt. Sie verwenden einfach die absolute Positionierung auf einem normalen img-Tag und lassen es so aussehen, als ob Sie die CSS-Eigenschaft background-image verwendet hätten. Sie müssen nur das Bild in einen Container position: relative; platzieren. Hier sehen Sie, wie das HTML-Markup generell aussieht:
<div class="demo_wrap">
<h1>Hello World!</h1>
<img src="https://xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png">
</div>
Und hier, wie Ihr CSS aussehen wird:
.demo_wrap {
position: relative;
overflow: hidden;
padding: 16px;
border: 1px dashed green;
}
.demo_wrap h1 {
padding: 100px;
position: relative;
z-index: 2;
}
.demo_wrap img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
Der Trick dabei ist, das Bild absolut zu positionieren und zu strecken, damit es den gesamten übergeordneten Container ausfüllt. Und alles andere relativ zu positionieren, damit Sie einen z-index setzen können, der es über das Bild zieht.
Hier ist eine Live-Demo:
Methode 2: Verwenden von CSS-Pseudo-Elementen
Diese Methode ist einfach, sobald Sie sie sehen, und ist definitiv meine bevorzugte Methode. Mit CSS-Pseudo-Elementen von entweder :before oder :after erstellen Sie ein div mit einem Hintergrundbild und legen eine Opazität darauf fest. Hier sehen Sie, wie Ihr HTML-Markup etwa aussehen würde:
<div class="demo_wrap">
<h1>Hello World!</h1>
</div>
Und hier, wie das CSS aussieht:
.demo_wrap {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.demo_wrap h1 {
padding: 50px;
position: relative;
z-index: 2;
}
/* You could use :after - it doesn't really matter */
.demo_wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
Auch hier müssen wir den z-index des Inhalts (in diesem Fall das <h1>) über das Hintergrund-Pseudoelement verschieben, und wir müssen die position: absolute; und den z-index: 1 auf dem Pseudoelement :before explizit definieren.
Die restlichen Attribute des Pseudoelements dienen dazu, es so zu positionieren, dass es 100 % des übergeordneten Elements überschneidet. Außerdem verwenden wir eine clevere neue CSS-Eigenschaft: background-size: cover, die den Hintergrund so dimensioniert, dass er das Element bedeckt, ohne die Proportionen zu verändern. Hier ist eine schöne kleine Demo dieser Methode: