it-swarm.com.de

<div> Unschärfe eines Teils des Hintergrundbildes mit CSS

Ich benutze diese Ist es möglich, -webkit-filter zu verwenden: blur (); auf Hintergrundbild? lösung um verschwommenes backgroung bild zu machen und es funktioniert super! Aber ich möchte etwas mehr als Backgound machen und es verschwimmen lassen. Der Hintergrund sollte also nur unter klar und verschwommen sein. Wenn ich den Unschärfefilter auf diesem div bewege, wurde er unscharf, aber das Hintergrundbild ist immer noch klar.

HTML ist einfach:

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

CSS ist:

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

Hier ist ein Beispiel http://jsfiddle.net/photolan/8gVGR/

Also muss ich den Hintergrund unter content div nur mit CSS verwischen.

11
Ruslan Abyshov

Wenn es dynamisch sein muss, sollten Sie einige Probleme haben, aber Sie können einen Ort haben, an dem Sie damit beginnen können:

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

GEIGE

10
EdenSource

verwenden Sie -webkit-filter: verwischen (2px) in .background div nicht in .content div.

Hier ist Ihr aktualisierter Code:

.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