CSS: Kombination von Textur und Farbe

jemand, wie man kombinieren Textur verwenden als hintergrund-Bild und Hintergrund-Farbe über die textur ?

Hier die textur :

Ich will, dass mein Körper hintergrund Seite so sein :

CSS: Kombination von Textur und Farbe

Bin ich zu kämpfen mit backroung-image und background-color : http://jsfiddle.net/87K72/

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

Wenden Sie den hintergrund Bild, um Ihre html tag, gilt die Hintergrundfarbe, um Ihre body tag und stellen Sie sicher, es nimmt die ganze Seite.

InformationsquelleAutor Rollyng | 2013-08-07

7

Können Sie ein overlay-div mit einem alpha-Kanal auf der Oberseite des Körpers, aber unter die anderen Elemente.

jsFiddle-Beispiel
```
<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;
}
```
Wow, wusste nicht, über top/left/bottom/right = 0 trick eine gestreckte div über den gesamten viewport. Schön!
Mit pseudo-Elementen, die das #cover könnte leicht vermieden werden.
Diese Lösung funktioniert nicht mit Seiten, die es ermöglichen, nach unten scrollen: jsfiddle.net/87K72/4
ändern Sie einfach position:absolute; zu position:fixed;

InformationsquelleAutor j08691
1

Es sieht aus wie Ihre textur hier fehlt, ist eine alpha-Kanal. Es ist nicht semi-transparent, es ist wirklich weiß.

Sie war die erste und Sie war richtig!!!! Ich nehme es hier für Sie Ihr wissen subtlepatterns.com
Überprüfen Sie die @j08691 Lösung es ist ein netter trick(muss man wissen) und Die funktioniert trotz der Wert der Transparenz
Ja, es ist ein netter trick, aber es ist im Grunde die gleiche Idee, dass eine semi-transparente Schicht über der anderen. Dieses mal die Farbe Schicht auf der Oberseite. Das problem bei diesem Ansatz ist, dass Sie zu zwicken, wie die Farbe und den alpha-Wert haben es genau richtig, weil es semi-transparent, wird es verblassen ein wenig. Wenn Sie mit einem designer oder wenn Sie brauchen, um die Achtung einer festen Farbe Diagramm, es ist besser zu arbeiten mit den Farb-codes, wie Sie sind zur Verfügung gestellt.
Sorry, aber ich noch nicht sehen, was ist der Punkt mit z-index zu so etwas. Verwenden Sie einfach ein png mit alpha-Kanal wie Miklos suggeriert oder :nachdem Sie mit der Deckkraft auf das Bild. Und ja, verwenden Sie eine Farbe overlay-Ebene mit Deckkraft-problem ist ein gehalten die genaue Referenz.
ich habe nicht auf der z-index. Über alpha-Kanal hast du Recht, das saubere Lösung. Thks Sie beide

InformationsquelleAutor Miklos Aubert

Könnten Sie machen Gebrauch von css-opacity zu tun.

Erstellen Sie zwei divs, eines für die Farbe und eine für die textur:

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

InformationsquelleAutor BG100

1

Brauchst du einen semi-transparenten hintergrund textur, und dann Ihre CSS-Richtlinie wird den trick tun:

HTML:
```
<h1>I want blue color above my texture</h1>
```
CSS:
```
body {
    background: #6DB3F2  url('http://wizzley.com/static/img/bg/texture8.png');
}
```
Beispiel:
http://jsfiddle.net/87K72/3/

Überprüfen Sie die @j08691 Lösung es ist ein netter trick(muss man wissen) und Die funktioniert trotz der Wert der Transparenz

InformationsquelleAutor Simon Steinberger

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

Es sollte "position: fixed" zu machen, dieses arbeiten mit Seiten, muss nach unten gescrollt. Darüber hinaus ist es ein wenig mühsam, die richtigen z-index für alle Elemente, die angezeigt wird, über die Farbe-Schicht.

InformationsquelleAutor daniel__

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.