过滤器过滤css_CSS过滤器防止剧透

过滤器过滤css

No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead of time.  Sometimes the article title is prefixed with [SPOILER] text or a something similar.  I've thought of a better way -- use CSS filters to blur spoiler content.

没有人喜欢破坏者。 无论是即将上映的电影中的图像，还是DVR录制的足球比赛的结果，有时您只是不想知道。 作为扰流器内容的可能提供者，某些站点可能选择提前警告用户。 有时，文章标题会以[SPOILER]文字或类似内容作为前缀。 我想过一种更好的方法-使用CSS过滤器模糊剧透内容。

View Demo 观看演示

CSS (The CSS)

CSS filters provide a simple way to blur the spoiler content so that the underlying image or text is not legible:

CSS过滤器提供了一种简单的方法来模糊破坏者的内容，以使下面的图像或文本不清晰：

.spoiler {
	filter: blur(20px);
	transition-property: -webkit-filter;
	transition-duration: .4s;
}
.spoiler:hover, .spoiler:focus {
	filter: blur(0px);
}

You will also note that hovering over the offending content will animate the blur until it's been removed.  Unfortunately CSS filters are only supported in WebKit at the moment, but we can no doubt expect more browser support shortly. Also note the :focus addition -- if you set tabIndex=0 on all .spoiler elements, you can support mobile touch to unblur as well!

您还将注意到，将鼠标悬停在有问题的内容上将使模糊动画化，直到将其删除为止。 不幸的是，目前只有WebKit支持CSS过滤器，但是我们可以肯定会很快获得更多的浏览器支持。 还要注意:focus附加项-如果在所有.spoiler元素上设置tabIndex=0 ，则还可以支持移动触摸以消除模糊！

This jQuery plugin tipped me off on how to achieve a similar blur within Firefox using SVG:

这个jQuery插件向我介绍了如何使用SVG在Firefox中实现类似的模糊处理：

<img src="ricci.jpg" alt="Christina Ricci" class="spoiler" style="filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'20\' /></filter></svg>#blur");" />

Not the most beautiful of code but works nonetheless.  Changing the stdDeviation to 0 (via JavaScript) would present the element without blur.

不是最漂亮的代码，但是仍然可以工作。 将stdDeviation更改为0(通过JavaScript)将显示元素而不会模糊。

View Demo 观看演示

Preventing spoiler content is a very limited case (even more limited in the case the photo is Christina Ricci) but it's good to have a strategy just in case.  I like this strategy because it provides an easy option to the user (hovering) to view the obscured content.

防止剧透内容是非常有限的情况(在照片是Christina Ricci的情况下甚至更为有限)，但是最好有一个策略以防万一。 我喜欢这种策略，因为它为用户(悬停)提供了一个简单的选项来查看模糊的内容。

翻译自: https://davidwalsh.name/spoiler-filter

过滤器过滤css