Css-achtergrondafbeelding donkerder maken?

Het zou een vrij eenvoudige vraag moeten zijn. In mijn website doe ik dit:

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

Wat ik zou willen doen, is de achtergrondafbeelding donkerder maken. Omdat ik UI-elementen in deze DIV heb, denk ik niet dat ik er echt nog een div overheen kan plaatsen om het donkerder te maken. Suggesties?


Antwoord 1, autoriteit 100%

Je kunt de eigenschap CSS3 Linear Gradientsamen met je achtergrondafbeelding op deze manier gebruiken :

#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;
}

Hier is een demo:

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three × 3 =

Other episodes