Ein Hintergrundbild transparent machen, ohne den Rest des div zu ändern

Question

Ich habe ein div mit einer Hintergrundfarbe und einem Hintergrundbild. Der Div nennt diese Klasse:

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png); 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

Ich versuche, nur das Bild etwas transparent zu machen. Ich habe es versucht:

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

Aber das macht das gesamte div transparent.

So habe ich versucht, dieses:

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png) opacity(0.6); 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

Aber das macht das Bild ganz verschwinden. Kann das gemacht werden?

Answer 1

Was Sie an diesem einzelnen Element versuchen, ist nicht möglich, aber es gibt viele Möglichkeiten, die dasselbe mit sehr wenig zusätzlichem Aufwand tun können. Wahrscheinlich wäre der beste Weg, dem .cakebg Element mit den gleichen Dimensionen, die nur das Hintergrundbild haben, ein zusätzliches Kindelement mit Deckkraft hinzuzufügen. Wie zum Beispiel:

.cakebg .child-element { 
    height: 100%; 
    width: 100%; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
} 

Wenn Sie Ihren Markup sauber zu halten sind versuchen, können Sie auch diese als Pseudoelement hinzufügen. Wie die folgenden:

.cakebg:after { 
    content: ""; 
    height: 100%; 
    width: 100%; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
} 

Wenn von Ihrem Lieblings-Editing-Software keine dieser Methoden arbeiten, könnte ein letztes Mittel das Bild bearbeiten, die Opazität in gebacken haben. Hoffentlich können einige dieser Methoden helfen!

Answer 2

Es gibt keine CSS-Eigenschaft background-opacity, aber Sie können es vortäuschen, indem Sie ein Pseudo-Element mit normaler Deckkraft die genaue Größe des Elements dahinter einfügen.

.cakebg { 
background-color: #F8BBD0; 
background-size: 25%; 
position: relative; 
} 

.cakebg::after { 
    content: ""; 
    background: url(img/cake.png); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

oder Sie können einfach eine trasparent als Hintergrund verwenden PNG-Bild

Answer 3

Es gibt keine CSS-Eigenschaft nur den Hintergrund transparent zu machen, aber man kann es eine Fälschung durch ein Pseudo-Element mit der gleichen Größe des Elements Einfügen dahinter und ändere die Undurchsichtigkeit davon.

.cakebg { 
    background-color: #F8BBD0; 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

.cakebg::after { 
    content: ""; 
    background-image: url(img/cake.png); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

Bitte beachten Sie, dass diese Frage schon oft, read here zum Beispiel gefragt wurde.