Können Sie einen CSS-Filter auf das Hintergrundbild eines Div-Style-Elements anwenden?

Question

Hier ist der Code, den ich suche auf:

<div class="fullwidth-box vas_row-back1" style="background-color: 
rgba(99,59,0,0.79);background-image: 
url(&quot;http://example.com/wp-content/uploads/2015/11/myphoto.jpg&quot;);background-position: 
center center;background-repeat: 
no-repeat;padding-top:80px;padding-right:40px;padding-bottom:80px;padding-left:40px;margin-bottom: 
60px;margin-top: 
30px;-webkit-background-size:cover;-moz-background-size:cover;-o- 
background-size:cover;background-size:cover;background- 
attachment:none;"> 

ich die CSS für die .vas_row-back1 Klasse steuern kann, aber ich kann die Ausgabe des Stils nicht ändern = des div weil das Thema das schafft.

Was ich tun möchte, ist ein Filter auf den Bildhintergrund anwenden. Wenn ich benutze:

.vas_row-back1[style] { 
-webkit-filter: grayscale(80%); /* Safari */ 
filter: grayscale(80%); } 

Der Filter gilt für den gesamten div samt Inhalt.

Wenn ich versuche:

.vas_row-back1[style]:background-image { 
-webkit-filter: grayscale(80%); /* Safari */ 
filter: grayscale(80%); } 

Es ist überhaupt nicht registrieren, die Klasse bricht. Ich möchte in der Lage sein, den Filter nur auf das Hintergrundbild des DIV, aber nicht auf den Inhalt anwenden zu lassen. Denkst du, dass das möglich ist? Gedanken?

Answer 1

Sie sollten nur ein separates div mit dem Hintergrundbild geschachtelt in diesem Hauptdiv.

Eine andere Alternative ist die Verwendung eines Pseudoelements (:before/:after) mit dem Hintergrundstil.