Come scurire un'immagine di sfondo CSS?

Mi sto strappando i capelli. Ho provato letteralmente tutto quello che ho trovato e a questo punto immagino che dovrei fare una specie di errore. Sto cercando di scurire l'immagine di sfondo in modo che non sia altrettanto saturo.Come scurire un'immagine di sfondo CSS?

Ecco il mio HTML:

<body id="home"> 
    <header> 
     <nav> 
      <ul class="pull-left"> 
       <li><a href="#">Bearbeard Logo</a></li> 
       <li><a href="#">World</a></li> 
      </ul> 
      <ul class="pull-right"> 
       <li><a href="#">Eretikas</a></li> 
       <li><a href="#">Custom</a></li> 
      </ul> 
      <div id="slogan">THE HERETIC SWORD</div> 
     </nav> 
    </header> 
</body>

E il mio CSS:

#home { 
    background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
nav li { 
    display: inline; 
    position: relative; 
    float: left; 
} 
nav a { 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 
#slogan { 
    color: #FFFAF0; 
    font-family: 'Raleway', sans-serif; 
    font-weight: bold; 
    font-size: 18px; 
    opacity: 0.5; 
    text-align: center; 
    font-weight: bold; 
}

Questo mi dà uno sfondo che copre completamente la pagina. Ma voglio oscurarlo (senza oscillare o fare clic). Tutto ciò che ho provato NON ha raggiunto alcun oscuramento (ho provato falsi gradienti, reba, ecc.), E in qualche modo interferisce con <div id="slogan"> e <nav>, spingendoli dappertutto.

La mia formattazione è completamente errata?

fonte

2015-07-26 theblackveil

Perché non modificare l'immagine 'hellcity.jpg' ad essere più scuro? –

Sto cercando di imparare come farlo tramite CSS in modo da non dover modificare le foto in futuro (invece di usarle appena vengono e usare gli strumenti della mia utilità per farlo per me). – theblackveil

Ecco una [risposta] (http://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css) su come ridurre la luminosità, può essere d'aiuto? Consiglierei di usare la risposta 'filter: brightness'. –

#home { 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

This should work

fonte

2015-07-26 00:42:38 Frankenmint

Quindi, non ho idea del perché ... Ma questo è stato. Ho provato prima, scritto con le porzioni rgba sulle loro linee (o forse avevo solo un rgba invece di entrambi?). modifica: Quindi, non so come mostrarti cosa stavo facendo prima per determinare perché questo funziona ora quando non ha funzionato prima. : '/ Indipendentemente da ciò, potresti spiegare perché questo oscura l'intero background quando tutti gli altri metodi mostrati (e in altre risposte per questa domanda SAME) oscurerebbero solo il contenuto di

Penso che i tuoi tag non siano stati formattati correttamente e il precedente e il passaggio del mouse: elementi del corpo stavano sanguinando nel markup del nav. Non posso saperlo senza che tu torni indietro di qualche passo e incollando la fonte qui per confermare. – Frankenmint

solo per essere sicuro di capirti, stai suggerendo che forse non stavo chiudendo o aprendo correttamente i punti() o {}, portando a questa sezione di istruzioni che si nutrono di quelli che seguono? Questo molto bene potrebbe essere completamente corretto. – theblackveil

creare un div contenitore che si adatta al 100% del #Home poi:

#container { 
background: rgba(0, 0, 0, 0.5); 
}

l'opacità 0,5 = 50% ...

avrà l'effetto di oscurare l'immagine di sfondo

fonte

2015-07-26 00:42:21 LFX

Questo è uno dei metodi che ho provato. Ciò che accade è che oscura gli elementi nav/ul invece dello sfondo. – theblackveil

se aggiungi un contenitore dopo il corpo, PRIMA di fare l'intestazione, allora non c'è modo che possa oscurarne quelli, a meno che non usi qualcosa come z-index – LFX

@theblackveil - Puoi andare avanti e aggiungere tutti i metodi che hai provato già alla tua domanda? – BSMP

È possibile impostare lo sfondo suTage aggiungi un livello più scuro con pseudo contenuto con rgba() + alpha, quindi avvolgi tutto il contenuto in div e impostalo su position:relative, per farlo rimanere in primo piano.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: url("http://lorempixel.com/400/200") center center no-repeat; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 
body:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; right: 0; top: 0; bottom: 0; 
 
    transition: background .5s; 
 
} 
 
body:hover:before { 
 
    /*for demo, move this line up if you want to darken it as default*/ 
 
    background: rgba(0,0,0, .5); 
 
} 
 
div { 
 
    position: relative; 
 
    color: white; 
 
}

<div>Hello world!</div>

fonte

2015-07-26 00:49:26 Stickers

primo ordine del giorno: Non hanno bisogno id o classe elemento corpo

e la seconda vedere il codice qui sotto.

body { 
 
    background: 
 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
 
    url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg); 
 
} 
 

 
nav a { 
 
    color: #5a5a5a; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    padding: 14px 10px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#slogan { 
 
    color: #FFFAF0; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    opacity: 0.5; 
 
    text-align: center; 
 
    font-weight: bold; 
 
}

<body> 
 
    <nav> 
 
     <ul class="pull-left"> 
 
      <li><a href="#">Bearbeard Logo</a></li> 
 
      <li><a href="#">World</a></li> 
 
     </ul> 
 

 
     <ul class="pull-right"> 
 
      <li><a href="#">Eretikas</a><li> 
 
      <li><a href="#">Custom</a><li> 
 
     </ul> 
 

 
     <div id="slogan">THE HERETIC SWORD</div> 
 
    </nav> 
 
    </body>

originale dell'immagine grazie a Google :)

fonte

2015-07-26 01:14:20

Grazie per questo. Capisco perfettamente il tuo primo punto, è stato qualcosa che ho fatto nel tentativo di provare cose nuove. - -; Grazie, però, non ero positivo al riguardo. Il secondo punto, non sono sicuro di seguire? Cosa non dovrebbe essere dentro il corpo? Sto solo cercando di fare in modo che le cose vadano avanti. – theblackveil

' Modificherò il mio post :) SPIACENTE –

Grazie. Ti dispiacerebbe ampliare il motivo per cui non dovrebbe essere all'interno del corpo? Ho una sezione che NON è all'interno del corpo. Il segmento proveniva da un png di "Beautiful HTML" e il mio pensiero era che intendeva separare il contenuto di navigazione dal resto della pagina. Apprezzo il tuo feedback. – theblackveil

Come scurire un'immagine di sfondo CSS?

risposta

Problemi correlati