web-dev-qa-db-ja.com

<div>背景画像の一部をcssでぼかす

私はこれを使用します background-imageで-webkit-filter：blur（）;を使用することは可能ですか？ ソリューションでぼやけた背景画像を作成し、それがうまく機能します！しかし、背景の上に<div>を作り、ぼやけさせたいです。したがって、背景は<div>の下のみではっきりとぼやけている必要があります。そのdivでぼかしフィルターを移動すると、ぼかしになりますが、背景画像はまだはっきりしています。

HTMLはシンプルです：

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

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

これが例です http://jsfiddle.net/photolan/8gVGR/

したがって、CSSのみを使用してコンテンツdivの下の背景をぼかす必要があります。

csshtmlbackgroundfilterblur
12
Ruslan Abyshov

それが動的でなければならない場合、いくつかの問題が発生するはずですが、これをどこかから始めることができます：

[〜＃〜] 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;
}

[〜＃〜] fiddle [〜＃〜]

12
EdenSource

.background divではなく.content divで-webkit-filter：blur（2px）を使用してください。

更新されたコードは次のとおりです。

.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