Verdunkelung ein Hintergrund-URL-Bild mit CSS

Question

Ich bin auf der Suche nach einer Hintergrund-URL-Bild verdunkeln, die ich in einem Header habe. Weiß jemand, was ich anwenden könnte, um den dunklen Effekt rechts im Bild zu bekommen? oder vielleicht kann dies nur mit einer Photoshop-Technik erstellt werden?

Ich habe die Stile unten versucht, aber nichts, wie es

-webkit-filter: grayscale(1); */ 
filter: grayscale(1); 
opacity: 0.5; 

Answer 1

Sie können nicht verwenden, um die filter Eigenschaft auf ein Hintergrund Bild.

Was Sie tun können, ist ein zweites "Bild" mit einer dunklen Transparenz zu überlagern. Ein Farbverlauf wird als Hintergrundbild behandelt, sodass wir die Möglichkeit nutzen können, mehrere Hintergrundbilder zu verwenden, um diesen Effekt zu erzielen.

body { 
 
    background-image: 
 
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
 
    url(http://www.fillmurray.com/1460/1300); 
 
    background-size: cover; 
 
}

Answer 2

Sie einige Tauchgang mit z-index hinzufügen: 2, dann die Hintergrundfarbe auf Schwarz gesetzt und Opazität zu 0.5, dann setze relative Position, und setze das div auf die gleiche Stelle wie das img und die gleiche Größe.

Auf diese Weise haben Sie einige Div, die das Originalfoto abdecken wird.

zum Beispiel:

.cover-photo{ 
background-color:black; 
opacity:0.5; 
position:absolute or relative - You have to find the best way 
top:0; 
height: the same as img; 
width: the same as img; 
}