Opazität Einstellung auf nur Hintergrundbild mit rgba()

Question

ich auf diesem Posten ausgesehen haben, die eine klare Beschreibung, wie gab nur die Deckkraft des Mutterhintergrundbild, ohne die Elemente Kinder zu beeinflussen: HTML/CSS text background transparent but text not

aber wie kann ich ein Hintergrundbild zusammen mit der Opazität setzen? Ursprünglich verwendete ich Opazität so (aber die Kinder Elemente wurden auch betroffen):

.content { 
    background-image: url('link/url/image.jpeg'); 
    opacity: 0.35; 
} 

Aber nach oben an der SO Post verknüpft suchen, habe ich versucht, dieses:

.content { 
    background-image: url('link/url/image.jpeg'); 
    background: rgba(255, 255, 255, 0.35); 
} 

Aber es scheint, wie die Hintergrund rgba() Werte tun nichts. Ich habe auch versucht:

.content { 
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg'); 
} 

Aber dann wird der Hintergrund nicht angezeigt.

Answer 1

Probieren Sie dies aus:

.content::after { 
    content: ""; 
    background: url('link/url/image.jpeg'); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

Answer 2

In Ihrem Fall die Hintergrundfarbe nicht gesehen werden kann, weil das Bild, um Farbe geht, und wenn es nicht transparent ist es nicht angezeigt werden soll.

Derzeit gibt es kein Attribut, dem nur für das Hintergrundbild eine Transparenz zugewiesen werden kann.

Wenn Sie ein transparentes Hintergrundbild ohne jegliche Art von Effekt oder Übergang in Hover erstellen möchten, können Sie direkt ein Bild im PNG-Format verwenden und es mit einer Transparenz speichern.

Andernfalls müssen Sie einen Container in "position: relative" und "overflow: hidden" mit einem internen Bild und einen anderen Container in "position: absolute" mit Text oder anderen innerhalb erstellen. Auf diese Weise können Sie nur dem Bild Transparenz zuweisen, ohne den Rest zu beeinflussen.