सीएसएस पृष्ठभूमि छवि डार्क?

Question

एक काफी सरल सवाल होना चाहिए। मेरी वेबसाइट में मैं यह करता हूं:

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

मैं क्या करना चाहता हूं पृष्ठभूमि छवि को गहरा बनाना है। चूंकि मेरे पास इस डीआईवी के अंदर यूआई तत्व हैं, मुझे नहीं लगता कि मैं इसे अंधेरे करने के लिए वास्तव में एक और div डाल सकता हूं। सुझाव?

Answer 1

आप इस तरह अपने पृष्ठभूमि छवि के साथ CSS3 Linear Gradient संपत्ति का उपयोग कर सकते हैं:

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

यहाँ एक डेमो है:

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