图片模糊css_跨浏览器图像模糊与CSS

最新推荐文章于 2022-05-30 14:37:16 发布

cungui5726

最新推荐文章于 2022-05-30 14:37:16 发布

阅读量378

点赞数

文章标签：过滤器 css html css3 java

原文链接：https://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS

版权

图片模糊css

blur is similar to the Gaussian Blur filter in PhotoShop; its presence in CSS and SVG means we can now achieve the same effects natively on the web.

blur类似于PhotoShop中的高斯模糊滤镜; 它在CSS和SVG中的存在意味着我们现在可以在Web上本地实现相同的效果。

If used incorrectly or too frequently, blur may make your users feel that they are visiting your site after a week-long bacchanal, quickly producing a headache. To counteract that, effect blur is often combined with an “undo” transition, which I’ll also demonstrate in this article.

如果使用不正确或使用频率过高，模糊可能会使您的用户在进行为期一周的试用后感觉到他们正在访问您的网站，从而很快引起头痛。为了解决这个问题，效果模糊通常与“撤消”过渡结合在一起，我还将在本文中进行演示。

IE 9+的注意事项 (A Note on IE 9+)

As Microsoft moved to bring Internet Explorer to modern web standards, it dropped many of the proprietary CSS values that had been supported in the browser since IE 5.5, including the DX filters mentioned below. Unfortunately, it did not replace them with the CSS3 alternatives, leaving IE9, 10 and 11 between between a rock and a hard place. As of this writing, I could only suggest that developers who need images displayed with exactly the same blur across all browsers to use a canvas solution such as StackBlur.

随着Microsoft逐渐将Internet Explorer引入现代Web标准，它放弃了自IE 5.5以来在浏览器中受支持的许多专有CSS值，包括以下提到的DX过滤器。不幸的是，它并没有用CSS3替代它们，而是将IE9、10和11摆在了一块硬石之间。在撰写本文时，我只能建议那些需要在所有浏览器中以完全相同的模糊显示图像的开发人员使用诸如StackBlur之类的canvas解决方案。

First, our HTML content:

首先，我们的HTML内容：

<img src="pakistani-woman.jpg" alt="Three-quarter profile photograph of Pakistani woman in black dupatta" class="blur">

Then the blur effect, applied via a class:

然后通过类应用模糊效果：

img.blur {
	width:367;
	height:459px;
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

SVG模糊滤镜 (The SVG blur filter)

To this point the blur effect will work in Chrome, Safari (mobile and desktop) and Firefox 35+. To gain support for earlier versions of Firefox, we need to apply an SVG filter:

至此，模糊效果将在Chrome，Safari(移动和台式机)和Firefox 35+中起作用。要获得对Firefox早期版本的支持，我们需要应用SVG过滤器：

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

Saved as a file called blur.svg, our CSS changes to:

保存为名为blur.svg的文件后 ，我们CSS更改为：

img.blur {
	width:367; height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

建立对旧版本IE的支持 (Building support for older versions of IE)

To gain the same effect in IE 4 – 9, we have to use the old DX Microsoft filter. Our class becomes:

为了在IE 4 – 9中获得相同的效果，我们必须使用旧的DX Microsoft过滤器。我们的班级变成：

img.blur {
	width:367;
	height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

关闭效果 (Turning off the effect)

If you want to focus the image, you must negate the filter in a new declaration. In this case, I’ll reverse the filter during mouseover via a :hover. (You can see this effect in the header image at the top of this article).

如果要聚焦图像，则必须在新的声明中取反滤镜。在这种情况下，我将在鼠标悬停时通过:hover反转过滤器。 (您可以在本文顶部的标题图像中看到此效果)。

img.blur:focus, img.blur:hover {
	-webkit-filter: blur(0px);
	filter: blur(0px);
	filter: none;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

Hovering over the blurred image in a non-IE browser you'll see that it is sharpened over time due to a transition.

将鼠标悬停在非IE浏览器中的模糊图像上，您会发现由于过渡，该图像会随着时间的推移而变尖锐。

修剪图像的边缘 (Trimming the edges of the image)

One issue is that unlike the other filters we’ve looked at so far, blur takes effect outside the immediate confines of the element, blurring the edges of the image with its surroundings. If you want the image to be blurred only in the inside, there are a few possible techniques:

一个问题是，与到目前为止我们观察过的其他滤镜不同， blur在元素的直接限制之外生效，使图像边缘及其周围环境模糊。如果只想让图像在内部模糊，可以采用以下几种方法：

If you have an image that has the same color on all the outside edges, as in the example above, you could set the background-color of the <body> or a container element to the same color.
如果您的图像的所有外边缘都具有相同的颜色(如上例所示)，则可以将<body>的background-color或容器元素设置为相同的颜色。
Use the clip property to trim the edges of the image. clip is always stated in the following order:
使用clip属性修剪图像的边缘。 clip始终按以下顺序表示：
```
clip: rect( top, offset of right clip from left side, offset of bottom from top, left)
```

For the example above, the image is 367px wide × 459 pixels high and the blur 2 pixels, so the clip would be stated as:

对于上面的示例，图像为367px宽×459像素高，模糊为2像素，因此该片段将表示为：

clip: rect(2px,365px,457px,2px);

(Note that clip is only applied to elements that have position: absolute applied to them. If you wanted to gain support in IE8 and earlier, remember to drop the px on the end of the values).

(请注意， clip仅适用于具有position: absolute元素。如果要在IE8和更早版本中获得支持，请记住将px放在值的末尾)。

Wrap the image in a containing element (a <div>, for example) that is slightly smaller than the image, apply overflow: hidden to the outer element and move the image to the left and up slightly to eliminate the visible blur on those edges.

将图像包装在比图像稍小的包含元素(例如<div> )中，应用overflow: hidden在外部元素上，然后将图像向左和向上稍微移动，以消除这些边缘上的可见模糊。

文字模糊 (Blurring Text)

While you can use this filter to blur text, there are better alternatives, which I address in the next article.

尽管可以使用此过滤器来模糊文本，但还有更好的选择，我将在下一篇文章中介绍。

翻译自: https://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS

图片模糊css

cungui5726

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片模糊css_跨浏览器图像模糊与CSS

图片模糊cssblur is similar to the Gaussian Blur filter in PhotoShop; its presence in CSS and SVG means we can now achieve the same effects natively on the web. blur类似于PhotoShop中的高斯模糊滤镜; 它在CSS和SVG中的存在意味着...
复制链接

扫一扫