Comment flouter une image en utilisant CSS3 sans rogner ou faner les bords?
Comment est-ce que vous pouvez flouter correctement une image en utilisant CSS3 sans faner les bords ou couper l'image?
Le problème le vert BG montrer thru:
HTML:
<div id="bg_img" classid="blink_me"></div>
CSS:
/*regular way of doing it*/
body{
background-color: #0F0;
margin: 0;
padding: 0;
}
#bg_img{
filter: blur(50px); /*Set amount of blur, px units are bad when re-scaling the window size */
-webkit-filter: blur(50px); /*Set amount of blur, px units are bad when re-scaling the window size */
position:absolute;
width: 100%;
height: 100%;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
}
2 réponses
C'est la solution que j'ai trouvé, c'est un peu un "hack" et peu brouillon, mais ça fonctionne. (au moins pour moi sur chrome)
je L'ai fait il était d'abord de créer une grille 3x3 et "miroir mosaïque"avec l'échelle et le décalage tout légèrement et puis j'ai zoomé à 300%, mais voici la partie étrange de la faire fonctionner j'avais besoin pour s'assurer qu'il a rendu les tuiles en dehors de la div, donc j'ai besoin d'avoir un caché d'animation div (#loading_dot dans le code) à l'index z correct, le forçant à tout rendre.
//astuce: utiliser vh ou vw au lieu de px pour l'échelle flou.
HTML:
<a href='http://www.patan77.com' id='text_overlay' class='blink_me' target='_blank'>Patan77.com</a>
<div id="loading_dot" class="blink_me"></div>
<div id="wrapper0">
<div id="wrapper1">
<div id="wrapper2">
<div id="bg1" class="bg_img"></div>
<div id="bg2" class="bg_img"></div>
<div id="bg3" class="bg_img"></div>
<div id="bg4" class="bg_img"></div>
<div id="bg5" class="bg_img">Visible DIV</div>
<div id="bg6" class="bg_img"></div>
<div id="bg7" class="bg_img"></div>
<div id="bg8" class="bg_img"></div>
<div id="bg9" class="bg_img"></div>
</div>
</div>
</div>
CSS:
body{
background-color: #0F0;
margin: 0;
padding: 0;
}
#text_overlay{
position:absolute;
z-index: 20;
outline: none;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 3em;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.bg_img{
position:absolute;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
width: calc(100% /3);
height: calc(100% /3);
}
#wrapper0{
position:absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
#wrapper1{
position:absolute;
width: 300%; /* 1 change these to 100% to zoom out*/
height: 300%; /* 2 change these to 100% to zoom out*/
top: -50%; /* 3 change these to 0 to zoom out*/
left: -50%; /* 4 change these to 0 to zoom out*/
z-index: 10;
}
#wrapper2{
filter: blur(6vh); /*Set amount of blur use vh units*/
-webkit-filter: blur(6vh); /*Set amount of blur use vh units*/
position:absolute;
width: 100%;
height: 100%;
z-index: 10;
}
#bg1{
position:absolute;
left: calc(-100% /6);
top: calc(-100% /6);
-webkit-transform: scale(-1,-1);
transform: scale(-1,-1);
}
#bg2{
left:calc(100% /6);
top: calc(-100% /6);
-webkit-transform: scale(1,-1);
transform: scale(1,-1);
}
#bg3{
left:calc(100% /2);
top: calc(-100% /6);
-webkit-transform: scale(-1,-1);
transform: scale(-1,-1);
}
#bg4{
-webkit-transform: scale(-1,1);
transform: scale(-1,1);
left: calc(-100% /6);
top:calc(100% /6);
}
#bg5{
left:calc(100% /6);
top:calc(100% /6);
color: #FFF;
font-size:50px;
text-align: center;
}
#bg6{
-webkit-transform: scale(-1,1);
transform: scale(-1,1);
left:calc(100% /2);
top:calc(100% /6);
}
#bg7{
-webkit-transform: scale(-1,-1);
transform: scale(-1,-1);
left:calc(-100% /6);
top:calc(100% /2);
}
#bg8{
-webkit-transform: scale(1,-1);
transform: scale(1,-1);
left:calc(100% /6);
top:calc(100% /2);
}
#bg9{
-webkit-transform: scale(-1,-1);
transform: scale(-1,-1);
left:calc(100% /2);
top:calc(100% /2);
}
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
Solution 2
une option Un peu plus viable, ont layer deux images une image derrière qui est également floue, mais a légèrement augmenté et ont ceux dans un élément d'enrubannage avec débordement: caché;
HTML:
<div id="bg_img_wrapper">
<div id="bg_img"></div>
<div id="bg_img_scaled"></div>
</div>
CSS:
body{
background-color: #0F0;
margin: 0;
padding: 0;
}
#bg_img{
filter: blur(3vh);
-webkit-filter: blur(3vh);
position:absolute;
width: 100%;
height: 100%;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
z-index:3;
}
#bg_img_scaled{
filter: blur(3vh);
-webkit-filter: blur(3vh);
position:absolute;
width: 100%;
height: 100%;
background-image: url(http://www.patan77.com/wallpaper/3d_cube_explosion_patan77.jpg); /*background image*/
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index:2;
}
#bg_img_wrapper{
position:absolute;
width: 100%;
height: 100%;
overflow: hidden;
}