<div> le flou de la partie de l'image de Fond en css

- Je utiliser ce Est-il possible d'utiliser -webkit-filter: blur(); sur l'image de fond d'écran? solution pour rendre le fond flou de l'image et il fonctionne très bien! Mais je veux faire de l' <div> en arrière-plan, et de la rendre floue. Afin d'arrière-plan doit être clair et flou sous <div> seulement. Si je change de filtre de flou sur ce div, il est devenu flou, mais l'image de fond encore clair.

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;
}

Ici est un exemple de http://jsfiddle.net/photolan/8gVGR/

J'ai donc besoin de flou d'arrière-plan en vertu de la div du contenu uniquement avec du CSS.

InformationsquelleAutor Ruslan Abyshov | 2013-10-15
  1. 10

    Si elle doit être dynamique, vous devriez avoir quelques ennuis, mais vous pouvez avoir un endroit 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

    • WOW! Fonctionne très bien! La solution la plus Simple pour une telle tâche difficile!
    • Une version horizontale avec le flou et l'opacité, jsfiddle.net/sE4Fv/677
    InformationsquelleAutor EdenSource
  2. 0

    utilisation -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);
}
    • Ne fonctionne pas. Seul le contenu de la div est devenu plus transparent.
    • Donc, vous voulez rendre le fond flou de l'image ou de la div du contenu flou?
    • Je veux faire de l'image d'arrière-plan flou sous .contenu de la div.
    • Vérifier mon code mis à jour.
    • Non-non. Je veux faire un fond flou en vertu de la div du contenu UNIQUEMENT. Je tiens donc à utiliser le contenu de la div que le masque de la couche de verre-effet en arrière-plan.
    • ensuite, vous devez utiliser du javascript ou jquery..

    InformationsquelleAutor Joke_Sense10