Posso applicare i filtri CSS (3) SOLO sulle sezioni delle immagini?

devo un'immagine di sfondo a schermo interoPosso applicare i filtri CSS (3) SOLO sulle sezioni delle immagini?

.bg { 
    left: 0; 
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
}

e vogliono applicare un filtro CSS3, personalmente vorrei utilizzare un effetto di sfocatura, nella stessa posizione come il mio corpo

.container { 
    margin: 0 auto; 
    width: 1000px; 
}

Ecco un esempio:

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

voglio scrivere il testo sopra il contenitore offuscata.

fonte

2013-08-13 Maximilian Fuchs

prendere un div, posizionarlo lì e usare l'opacità per rendere l'effetto mosso – Hushme

@Hushme che non sarà davvero sfocare lo sfondo, però, solo sbiadire il colore leggermente. –

@Hushme Sì, grazie. Ho già provato questo, ma puoi mostrarmi un esempio in cui il testo ** non è (anche) sfocato **? –

http://jsfiddle.net/QvSng/6/

CSS

body { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
} 
body:before { 
    left: 0; 
    right: 0; 
    margin-left:auto; 
    margin-right:auto; 
    content: ""; 
    position: absolute; 
    height: 100%; 
    width: 500px; 
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed; 
    background-size: cover; 
    z-index: -1; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
} 

div { 
    height: 100%; 
    width: 450px; 
    margin: 0 auto; 
}

fonte

2013-08-13 16:35:50

@MaximilianFuchs LOL, è necessario interpretare una risposta. Aggiungi solo il centro del centro senza ripetizioni fisso e le dimensioni dello sfondo: copertina; alla mia risposta Quello fu il primo di 2 o 3 minuti. http: // jsfiddle.net/QvSng/6/ –

Ora ho riconosciuto il tuo post e ho accettato la tua risposta! :-) –

@MaximilianFuchs, lo apprezzo. –

per ottenere l'effetto sfocatura, utilizzare filter: blur() (con prefissi vendor). La sfocatura si applica solo all'elemento stesso, non a qualcosa al di sotto di esso, quindi dovrai fare riferimento all'immagine all'interno della "sfocatura" e sullo sfondo e utilizzare background-position per controllare l'offset in modo che si allinei correttamente .

.blur { 
    background-image: url('http://placekitten.com/400/400'); 
    background-position: center -100px; 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
    filter: blur(10px); 
}

JSFiddle Demo

fonte

2013-08-13 16:37:42 CheeseWarlock

YEAH! GRANDE! Grazie mille! :) Accetto, ma puoi usare questo: background: url ("*") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-sfondo-size: copertina; dimensione di sfondo: copertina; –

Non penso che questo stesso concetto funzionerà per un'immagine di sfondo che è ridimensionata per adattarsi allo schermo. Questo è stato simile a quello che ho fatto anch'io, ma non l'ho ancora fatto funzionare con una dimensione di immagine bg non fissa. – andi

@andi: l'ho già provato, funziona, ma penso che tu lavori meglio;) –

si può effettivamente applicare sfocatura per il selettore before ed ereditare background-image invece di specificare URL due volte.

che rende la struttura html più evidente

JSFiddle Demo

fonte

2016-09-27 11:40:38 Srinivasan

Posso applicare i filtri CSS (3) SOLO sulle sezioni delle immagini?

risposta

Problemi correlati