पृष्ठभूमि छवि में रंग ओवरले कैसे जोड़ें?

Question

मैंने इस प्रश्न को एसओ और वेब दोनों पर बहुत कुछ देखा है। लेकिन उनमें से कोई भी मैं नहीं देख रहा हूं।

मैं केवल सीएसएस का उपयोग करके पृष्ठभूमि छवि में रंग-ओवरले कैसे जोड़ूं?

उदाहरण HTML:

<div class="testclass"> 
</div> 

उदाहरण सीएसएस:

.testclass { 
background-image: url("../img/img.jpg"); 
} 

कृपया ध्यान दें:

• मैं केवल सीएसएस का उपयोग करके इस को हल करना चाहते। यानी मैं रंग ओवरले के लिए div "testclass" के भीतर एक बच्चा div नहीं जोड़ना चाहता हूं।

• यह "होवर प्रभाव" नहीं होना चाहिए, मैं केवल पृष्ठभूमि छवि में रंग-ओवर जोड़ना चाहता हूं।

• मैं अस्पष्टता का उपयोग करने में सक्षम होना चाहता हूं यानी मैं एक ऐसे समाधान की तलाश में हूं जो आरजीबीए रंग की अनुमति देता है।

• यह एक बागान नहीं है जिसे मैं सिर्फ एक रंग की तलाश में हूं, काले कहें।

क्या यह संभव है? (अगर नहीं, तो मुझे आश्चर्य होगा, लेकिन मैं इसके बारे में कुछ भी नहीं ढूंढ पाया), और यदि ऐसा है तो इसे पूरा करने का सबसे अच्छा तरीका क्या है? सभी सुझाव और सलाह की सराहना की जाती है!

Answer 1

2 आसान विकल्प देखें:

• कई एक पारदर्शी एकल ढाल के साथ पृष्ठभूमि ओ ver छवि
• hudge इनसेट छाया

ग्रेडिएंट विकल्प:

html { 
 
    min-height:100%; 
 
    background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    }

छाया विकल्प:

html { 
 
    min-height:100%; 
 
    background:url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3); 
 
    }

मेरा एक पुराने codepen कुछ उदाहरण

Answer 2

background-image कई मान लेता है।

इसलिए केवल 1 रंग रैखिक-ढाल और css blend modes का संयोजन चाल करेगा।

.testclass { 
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
    background-blend-mode: overlay; 
} 

ध्यान दें कि सीएसएस मिश्रण-मोड के लिए आईई/एज पर कोई समर्थन नहीं है।

Answer 3

आप ओवरले बनाने के लिए एक छद्म तत्व का उपयोग कर सकते हैं।

.testclass { 
    background-image: url("../img/img.jpg"); 
    position: relative; 
} 
.testclass:before { 
    content: ""; 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    background: rgba(0,0,0,.5); 
} 

Answer 4

आप टिंट जोड़ सकते हैं

एचटीएमएल (<div class=tint>img src chose picture of what color overlay you want</div>)

Css (.tint img{"tranparrent:50%;"}) ****

Answer 5

इस प्रयास करें के साथ, यह सरल और स्पष्ट है। मैंने इसे यहां से पाया है: https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image { 

    width: 300px; 
    height: 200px; 

    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    /* bottom, image */ 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); 
}