11

我想创建一个div固定在一个位置并使其半透明的 - 使其后面的内容部分可见和模糊。我正在寻找的样式类似于Apple 网站div中的“查看全部”缩略图。

我唯一能做的就是调整opacity: 0.9，但我不能模糊div.

注意：div有一个固定的位置和背景滚动。scolls的背景是文字和照片的混合。

4

7 回答 7

23

CSS

CSS 3 有一个模糊过滤器（目前只有 webkit 2014 年 11 月）：

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 支持非标准过滤器

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

在此处查看模糊和其他过滤器的一些不错的演示。

webkit CSS 过滤器模糊示例

供将来参考这里是 CSS 过滤器的兼容性表。Firefox 似乎在 v35+ 中获得了该功能，而 IE11 似乎也没有任何兼容性。

SVG

另一种方法是使用 svg （对于基本上 IE9 及更高版本是安全的）：

filter: url(blur.svg#blur);

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

jsFiddle 演示

Javascript

您将实现与 javascript 的最高浏览器兼容性，但通常性能最慢并增加了 js 的复杂性。

于 2013-06-13T14:44:47.957 回答
8

您可以使用 CSS 图像过滤器。

-webkit-filter: blur(2px);
filter        : blur(2px);

有关 CSS 图像过滤器的更多信息：

演示：JSFIDDLE 模糊滤镜示例

但实际上，他们使用的是经过预处理的 JPG，只是将其用作正确位置的叠加层。

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

演示：JSFIDDLE CSS 模糊技术

于 2013-06-13T14:54:38.763 回答
2

你让我想尝试，所以我做了，看看这里的例子：

http://codepen.io/Edo_B/pen/cLbrt

使用：

  1. 硬件加速 CSS 过滤器
  2. 用于类分配和箭头键事件的 JS
  3. 图片 CSS Clip 属性

而已。

我也相信，如果使用画布复制当前 dom 并对其进行模糊处理，则可以为任何屏幕动态完成此操作。

于 2013-07-20T12:48:42.263 回答
2

这应该会在未来作为 CSS 过滤器出现在浏览器中，称为backdrop-filter. 目前几乎没有任何支持。有关浏览器支持，请参见：http ://caniuse.com/#feat=css-backdrop-filter

这个 CSS 过滤器可以在没有任何有趣的事情或黑客的情况下完成磨砂玻璃。它会做到的。

有人在 Vine 上录制了它的 Demo，看起来确实不错。他们每晚都使用 Safari 来访问 CSS 过滤器。https://vine.co/v/OxmjlxdxKxl

于 2015-07-25T15:43:09.720 回答
1

只需将不透明度为 0.9 的相同图像（或其中的一部分）放置在左/右/上/下几个像素 - 瞧

于 2014-05-02T17:30:44.927 回答
0

一些浏览器支持新的 CSS 属性backdrop-filter。此属性使您可以在不使用伪类的情况下在元素上添加“类似磨砂玻璃”的效果。

例子：

element {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

于 2020-02-27T22:24:25.003 回答
-2

首先，OP声明背景滚动。没有一个可用的答案真的允许滚动。根据 html 的设置方式，这是不可能的。但是使用着名/角度可以有多个渲染引擎来实现这种效果。我在这里建造了它。

它背后的想法是网站的两个效果图。一个是模糊的标题版本。另一个是身体。我使用 Famous/Angular 并使用模板在头部和身体中渲染模板。标头需要一个标头高度的偏移量，以便匹配。我很快就会在这里和网站上发布实际代码。

于 2015-04-22T22:21:40.907 回答