Ändern der Opazität eines CSS-Hintergrundbildes

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://1linux.info/wp-content/uploads/2021/02/community_bg-7.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:

Hallo Welt!

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://1linux.info/wp-content/uploads/2021/02/community_bg-7.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:

Hallo Welt!