web-dev-qa-db-fra.com

<div> flou d'une partie de l'image d'arrière-plan avec css

J'utilise ceci Est-il possible d'utiliser -webkit-filter: blur (); sur image de fond? solution pour rendre l'image d'arrière-plan floue et cela fonctionne très bien! Mais je veux en faire trop sur l'arrière-plan et le rendre flou. Donc, le fond devrait être clair et flou sous seulement. Si je déplace le filtre de flou sur cette div, il devient flou, mais l'image d'arrière-plan est toujours nette.

HTML est simple:

<body>
   <div class = "background"></div>
   <div class = "content"></div>
</body>

CSS est:

.content{
    width: 70%;
    height: 70%;
    border:2px solid;
    border-radius:20px;
    position: fixed;
    top: 15%;
    left: 15%;
    z-index:10;
    background-color: rgba(168, 235, 255, 0.2);
    filter: blur(2px); 
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px); 
    -ms-filter: blur(2px);
}
.background{
    width:100%;
    height:100%;
    background-image:url('http://www.travel.com.hk/region/time_95.jpg');
    z-index:0;
    position:absolute;
}

Voici l'exemple http://jsfiddle.net/photolan/8gVGR/

J'ai donc besoin de flouter l'arrière-plan sous le contenu div uniquement avec CSS.

csshtmlbackgroundfilterblur
11
Ruslan Abyshov

Si cela doit être dynamique, vous devriez avoir des problèmes, mais vous pouvez avoir quelque part pour commencer avec ceci:

HTML

<div class="background"></div>
<div class="mask">
    <div class="bluredBackground"></div>
</div>
<div class="content"></div>

CSS

.content {
    width: 70%;
    height: 70%;
    border:2px solid;
    border-radius:20px;
    position: fixed;
    top: 15%;
    left: 15%;
    z-index:10;
    background-color: rgba(168, 235, 255, 0.2);
}
.background {
    width:100%;
    height:100%;
    background-image:url('http://www.travel.com.hk/region/time_95.jpg');
    z-index:2;
    position:fixed;
}
.bluredBackground {
    width:100%;
    height:100%;
    display:block;
    background-image:url('http://www.travel.com.hk/region/time_95.jpg');
    z-index:1;
    position:absolute;
    top:-20%;
    left:-20%;
    padding-left:20%;
    padding-top:20%;
    -webkit-filter: blur(2px);
}
.mask {
    width: 70%;
    height: 70%;
    border:2px solid;
    border-radius:20px;
    position: fixed;
    top: 15%;
    left: 15%;
    z-index:10;
    overflow:hidden;
}

VIOLON

10
EdenSource

use -webkit-filter: blur (2px) dans .background div pas dans .content div.

Voici votre code mis à jour:

.content{
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
background-color: rgba(168, 235, 255, 0.2);
filter: blur(2px); 
-moz-filter: blur(2px);
-o-filter: blur(2px); 
-ms-filter: blur(2px);
}

.background{
width:100%;
height:100%;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:0;
position:absolute;
 -webkit-filter: blur(2px);
}
0
Joke_Sense10