CSS: Unire il Grana e il Colore

qualcuno come combinare Texture utilizzare come immagine di sfondo e il colore di Sfondo sopra la texture ?

Qui la trama :

CSS: Unire il Grana e il Colore

Voglio che il mio corpo pagina di sfondo per essere come questo :

CSS: Unire il Grana e il Colore

Sto lottando con backroung-immagine e colore di sfondo : http://jsfiddle.net/87K72/

body{
  background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png');
 }
Applicare l’immagine di sfondo per la vostra html tag, applicare il colore di sfondo per la vostra body tag e assicurarsi che si prende tutta la pagina.

InformationsquelleAutor Rollyng | 2013-08-07

5 Replies
  1. 7

    È possibile utilizzare una sovrapposizione div con un canale alfa sulla parte superiore del vostro corpo, ma sotto gli altri elementi.

    jsFiddle esempio

    <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, non sapevo alto/a sinistra/in basso/destra = 0 il trucco per ottenere una tesa div tutta la viewport. Bello!
    Con pseudo elementi di #coprire potrebbero essere facilmente evitati.
    Questa soluzione non funziona con le pagine che consentono lo scorrimento verso il basso: jsfiddle.net/87K72/4
    basta cambiare position:absolute; per position:fixed;

    InformationsquelleAutor j08691

  2. 1

    Sembra texture qui ha un canale alfa. Non è semi-trasparente, è davvero bianco.

    È stata la prima, e si era di destra !! Colgo qui per la vostra conoscenza subtlepatterns.com
    Controllare le @j08691 soluzione c’è un bel trucco(deve-sapere) Che funziona, nonostante il valore di trasparenza
    Sì, è un bel trucco, ma fondamentalmente è la stessa idea di avere un semi-trasparente strato sulla parte superiore di un altro. Questa volta il colore di livello superiore. Il problema con questo approccio è che si deve modificare il colore e il valore alfa per avere giusto, perché rende semi-trasparente farà svanire un po’. Se si lavora con un designer o se avete bisogno di rispettare un colore fisso grafico, è meglio lavorare con i codici di colore, così come sono forniti.
    Scusa, ma io ancora non vedere che cosa è il punto di usare z-index per tale cosa. Basta usare un png con canale alfa come Miklos suggerisce o :dopo con l’opacità dell’immagine. E sì, utilizzare un colore come livello di sovrapposizione con l’opacità è un problema mantenuto il riferimento esatto.
    io non uso z-index. Su canale alfa hai ragione, che la soluzione pulita. Thks si sia

    InformationsquelleAutor Miklos Aubert

  3. 1

    Si potrebbe fare uso di css opacità per fare questo.

    Creare due div, uno per il colore e uno per la trama:

    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

  4. 1

    È necessario utilizzare un semi trasparente texture di sfondo; poi il CSS direttiva farà il trucco:

    HTML:

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

    CSS:

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

    Esempio:
    http://jsfiddle.net/87K72/3/

    Controllare le @j08691 soluzione c’è un bel trucco(deve-sapere) Che funziona, nonostante il valore di trasparenza

    InformationsquelleAutor Simon Steinberger

  5. 1

    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;
    }
    Dovrebbe essere “position: fixed” per fare questo lavoro con le pagine che deve essere tagliato verso il basso. Inoltre, è un po ‘ noioso per impostare la corretta z-index per tutti gli elementi che dovrebbero apparire sopra il colore-layer.

    InformationsquelleAutor daniel__

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *