CSS: łączenie tekstury i koloru

Question

ktoś, jak połączyć użycie tekstury jako tła i koloru tła nad tą teksturą?

Tutaj tekstura:

Chcę moja strona ciało tło być tak:

jestem zmaga się z backroung wizerunku i kolor tła: http://jsfiddle.net/87K72/

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

Answer 1

można użyć div nakładki z kanałem alfa na górę ciała, ale pod innymi elementami.

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

Wygląda na to, że Twój texture here nie ma kanału alfa. To nie jest półprzezroczyste, jest naprawdę białe.

Answer 3

Do tego celu należy użyć półprzezroczystej tekstury tła; wówczas dyrektywa CSS rade:

HTML:

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

CSS:

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

Przykład: http://jsfiddle.net/87K72/3/

Answer 4

Można skorzystać z css kryciem, aby to zrobić.

Utwórz dwa DIV - jeden na kolor, a jeden na fakturze:

HTML:

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

CSS:

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