come sfocare l'immagine di sfondo solo in css

Ciao sto cercando di sfocare l'immagine di sfondo ma penso che manchi nel farlo. Qualsiasi aiuto su di esso aumenterà la mia energia per questo. Graziecome sfocare l'immagine di sfondo solo in css

Questa mia CSS

html { 
    position: relative; 
    min-height: 100%; 
    max-width: 100%; 
    background: url(img/rsz_1spring.jpg); 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
max-width: 100%; 
    overflow-x: hidden; 

}

sto cercando di applicare questo ma sfocatura tutta la mia pagina web instaed immagine di sfondo solo.

-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px);

Grazie.

fonte

2016-07-14 Tanmoy Sarkar

Eventuali duplicati di [Come applicare un filtro di sfocatura CSS 3 ad un immagine di sfondo] (http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) –

@TanmoySarkar Controlla il link nel commento sopra e dicci se la soluzione che hanno soddisfa le tue esigenze. – RDardelet

@RDardelet sto cercando di risolvere questo con quel link .. vediamo. –

Se si applica la sfocatura a <html>, si confonderà la pagina Web.

Invece di aggiungere lo sfondo a <html> È necessario creare un altro <div> con <body> con dimensioni a quella della pagina Web e aggiungere sfocatura ad esso.

Esempio

body { 
 
    font-family: "Arial"; 
 
    color: #fff; 
 
} 
 

 
.page-bg { 
 
    background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg'); 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<h1> 
 
This is a title 
 
</h1> 
 

 
<div class="page-bg"> 
 
</div>

fonte

2016-07-14 06:09:42 Kan412

@tympazz grazie mille questo è fantastico ... questo risolve il mio dubbio grazie. –

id Assegnare o attributo class per tag immagine o div contenente un'immagine quindi assegnare proprietà CSS a quell'immagine tag immagine o div contenente particolari. Stai sfocando per l'intero html che ovviamente sfocherà tutta la pagina web.

Per esempio:

<div class="image-container"><img class="blurred" src="..." /></div>

o si sfocatura dell'immagine-contenitore o di un'immagine direttamente come o l'immagine di div

.image-container, .blurred, .image-container>img { 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

fonte

2016-07-14 06:14:47

Grazie a tutti voi per il vostro gentile aiuto ... questo risolve il mio dubbio e la interroga anche .. grazie @everyone. :) –

come sfocare l'immagine di sfondo solo in css

risposta

Problemi correlati