सीएसएस: बनावट और रंग

Question

किसी को बनावट के ऊपर पृष्ठभूमि-छवि और पृष्ठभूमि-रंग के रूप में बनावट को कैसे जोड़ना है?

यहाँ बनावट:

मैं backroung छवि और के साथ संघर्ष कर रहा हूँ:

मैं अपने शरीर पृष्ठभूमि पृष्ठ इस तरह बनना चाहता हूँ पृष्ठभूमि रंग: http://jsfiddle.net/87K72/

body{ 
    background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png'); 
} 

Answer 1

आप पर एक अल्फा चैनल के साथ एक उपरिशायी div उपयोग कर सकते हैं आपके शरीर के ऊपर लेकिन आपके अन्य तत्वों के नीचे।

jsFiddle example

<h1>I want blue color above my texture</h1> 
<div id="cover"></div> 
body { 
    background: url('http://i.stack.imgur.com/oslRB.png'); 
} 
h1{ 
    position:relative; 
    z-index:2; 
} 
#cover { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-color:rgba(109,179,242,0.5); 
    z-index:1; 
} 

Answer 2

ऐसा लगता है कि आपके texture here में अल्फा चैनल की कमी है। यह अर्द्ध पारदर्शी नहीं है, यह वास्तव में सफेद है।

Answer 3

इसके लिए आपको अर्ध पारदर्शी पृष्ठभूमि बनावट का उपयोग करने की आवश्यकता है; फिर अपने सीएसएस निर्देश चाल करना होगा:

HTML:

<h1>I want blue color above my texture</h1> 

सीएसएस:

body { 
    background: #6DB3F2 url('http://wizzley.com/static/img/bg/texture8.png'); 
} 

उदाहरण: http://jsfiddle.net/87K72/3/

Answer 4

ऐसा करने के लिए सीएसएस अस्पष्टता का उपयोग कर सकता।

दो divs बनाएँ - बनावट के लिए रंग के लिए, और एक:

HTML:

<div class="texture-color"> 
    <div class="texture"> 
     <h1> I want blue color above my texture</h1> 
    </div> 
</div> 

सीएसएस:

.texture,.texture-color { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; } 

.texture { 
    background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png'); 
    opacity: 0.8; } 

.texture-color { 
    background-color: cyan; } 

jsFiddle

Answer 5

http://jsfiddle.net/uyrPA/3/

body { 
    width:auto; 
    height:auto; 
    background: green; 
} 


body:after{ 
    content : ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url(http://i.stack.imgur.com/oslRB.png) repeat; 
    width: 100%; 
    height: 100%; 
    opacity : 0.5; 
} 

h1{ 
    position:relative; 
    z-index:2; 
}