相关疑难解决方法(0)

如何将CSS 3模糊滤镜应用于背景图像

我有一个JPEG文件,我正在使用它作为搜索页面的背景图像,我正在使用CSS来设置它,因为我在Backbone.js上下文中工作:

background-image: url("whatever.jpg");
Run Code Online (Sandbox Code Playgroud)

我想一个CSS 3模糊滤镜应用为背景,但我不知道如何做到这一个元素的风格.如果我尝试:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Run Code Online (Sandbox Code Playgroud)

background-image在我的CSS 下面,它调整整个页面的样式,而不仅仅是背景.有没有办法只选择图像并应用过滤器?或者,有没有办法只为页面上的每个其他元素关闭模糊?

css background-image css-filters

450
推荐指数
6
解决办法
148万
查看次数

为什么+ 180deg和-180deg的色调旋转不会产生原始颜色?

通过阅读HSL/HSV色彩理论,我得到的印象是色调分量是一个循环属性,每360度重复一次,并且可以独立于饱和度和亮度/值进行更改.如果我错了,请纠正我,但这些陈述逻辑上遵循先前的定义:

  1. 旋转色调360度产生相同的颜色
  2. 将色调旋转180度两次产生原始颜色
  3. 将色调旋转180度,然后旋转-180度,得到原始颜色

但是,只有选项1是正确的.旋转色调4次+90度会产生与原始颜色甚至不相似的颜色.

此外,使用-webkit-filter和SVG

<filter><feColorMatrix in="SourceGraphic" type="hueRotate" values="..." /></filter>
Run Code Online (Sandbox Code Playgroud)

不要为相同的旋转产生相同的结果.另一方面,SVG过滤器生成的颜色在浏览器中是一致的.

是否存在色调旋转的"隐藏"属性,使操作不相关?


webkit过滤器和SVG的示例可以在这里找到:http://jsfiddle.net/maros_urbanec/ARsjb/5/

graphics hsl svg colors svg-filters

12
推荐指数
2
解决办法
2999
查看次数

标签 统计

background-image ×1

colors ×1

css ×1

css-filters ×1

graphics ×1

hsl ×1

svg ×1

svg-filters ×1