Questions tagged «css-filters»

17
如何将CSS滤镜应用于背景图像
我有一个JPEG文件,正在将其用作搜索页面的背景图像,并且由于要在Backbone.js上下文中进行工作,所以我正在使用CSS进行设置: background-image: url("whatever.jpg"); 我想一个CSS 3模糊滤镜应用只为背景,但只是一个元素,我不知道如何风格。如果我尝试: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-image在CSS的下面,它为整个页面设置了样式,而不仅仅是背景。有没有办法只选择图像并对其应用滤镜?另外,是否有一种方法可以仅关闭页面上所有其他元素的模糊效果?


7
如何仅使用CSS滤镜将黑色转换为任何给定的颜色
我的问题是:给定目标RGB颜色,#000仅使用CSS滤镜将黑色()重新着色为该颜色的公式是什么? 为了接受答案,它需要提供一个函数(使用任何语言),该函数接受目标颜色作为参数并返回相应的CSS filter字符串。 这样做的上下文是需要为内的SVG重新着色background-image。在这种情况下,它将支持KaTeX中的某些TeX数学功能:https : //github.com/Khan/KaTeX/issues/587。 例 如果目标颜色是#ffff00(黄色),则一种正确的解决方案是: filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) (演示) 非目标 动画。 非CSS过滤器解决方案。 从黑色以外的其他颜色开始。 关心黑色以外的其他颜色会发生什么。 到目前为止的结果 蛮力搜索固定过滤器列表的参数:https ://stackoverflow.com/a/43959856/181228缺点:效率低下,仅生成16,777,216种可能的颜色(带676,248种hueRotateStep=1)。 使用SPSA的更快的搜索解决方案: https: //stackoverflow.com/a/43960991/181228获得赏金 一个drop-shadow解决方案: https://stackoverflow.com/a/43959853/181228 缺点:不工作的边缘。需要非filterCSS更改和较小的HTML更改。 您仍然可以通过提交非蛮力解决方案来获得接受的答案! 资源资源 如何hue-rotate和sepia计算: https://stackoverflow.com/a/29521147/181228 例的Ruby实现: LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722 HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

10
如何使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); }
101 html  css  blur  css-filters 

3
如何计算所需的色相旋转以生成特定的颜色?
我有一张白色图片,正在用作div的背景,并且我想进行着色以匹配主题的主色。我知道我可以做到: filter: sepia() saturate(10000%) hue-rotate(30deg); 并循环hue-rotate查找颜色,但是可以预先计算出该值吗?鉴于指定的十六进制值非常暗,我想我也需要包括invert(%)过滤器。 给定十六进制值,#689d94我需要执行什么数学运算来计算期望值hue-rotate和invert将我的白色背景图像转换为相同颜色的值? 编辑 这是div带有绿色过滤的白色背景图像的a的代码段。这里的窍门div是,被过滤的是整个对象,而不仅仅是图像。如果要div在文本中输入一些文本,则文本颜色也会变为绿色。 div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent; background-size:5em; width:5em; height:5em; -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); } <div> </div> 运行代码段隐藏结果展开摘要
75 css  css-filters 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.