web-dev-qa-db-fra.com

Assombrir l'image de fond CSS?

Devrait être une question assez simple. Sur mon site je fais ceci:

#landing-wrapper {
    display:table;
    width:100%;
    background:url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

Ce que j'aimerais faire, c'est rendre l'image d'arrière-plan plus sombre. Comme j'ai des éléments d'interface utilisateur à l'intérieur de cette DIV, je ne pense pas pouvoir placer une autre div par dessus pour l'assombrir. Suggestions?

htmlcsscss3
100
Tom Maxwell

Vous pouvez utiliser la propriété CSS3 Linear Gradient avec votre image de fond comme ceci:

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

Voici une démo:

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
  background-position: center top;
  height: 350px;
  color: white;
}
<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>
282
Fahad Hasan