相关疑难解决方法(0)

如何使CSS玻璃/模糊效果适用于叠加层？

我在半透明叠加div上应用模糊效果时遇到问题.我希望div背后的一切都模糊不清,像这样:

这是一个不起作用的jsfiddle:http://jsfiddle.net/u2y2091z/

任何想法如何使这项工作？我希望尽可能保持简单并使其成为跨浏览器.这是我正在使用的CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Run Code Online (Sandbox Code Playgroud)

html css blur css3 css-filters

Cha*_*son

2017 09-28

76
推荐指数

8
解决办法

20万
查看次数

<div>使用css模糊部分Backgroung图像

我用这个是否可以使用-webkit-filter:blur(); 在背景图像？解决方案,使模糊的背景图像,它的效果很好!但我想在背景上做一些让它变得模糊.因此,背景应该是清晰和模糊的.如果我在该div上移动模糊滤镜,它会变得模糊,但背景图像仍然清晰.

HTML很简单:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这是一个例子http://jsfiddle.net/photolan/8gVGR/

所以我需要使用CSS模糊内容div下的背景.

html css background blur filter

Rus*_*hov

2019 03-25

12
推荐指数

1
解决办法

3万
查看次数