css中filter属性和backdrop-filter对比有什么区别
这篇文章主要为大家展示了css中filter属性和backdrop-filter对比有什么区别,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css中filter属性和backdrop-filter对比有什么区别”这篇文章吧。
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、网站建设、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的琼中黎族网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
filter和backdrop-filter具有一定区别:
Filter不仅仅作用于当前元素,后代元素也会继承这个属性,作用于一个空背景元素则没有效果。
backdrop-filter 是使透过该层的底部元素模糊化
backdrop-filter属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素 背后 的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳,尤其是安卓移动端。
filter属性
我们先来说说filter属性,css3中的filter属性简单易用且强大,这些效果作用在图片上可以实现一些特有的特效。而且目前主流浏览器都已经支持了这个属性。
从上图来看,大部分浏览器的兼容性都是不错的。
我们还是直接用代码来看。
body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; } .img { width: 500px; height: 500px; }
我们定义一张照片在网页中央,先不做任何处理。
这是原图呈现的效果。
接下来我们看filter的几个比较重要的属性。
opacity
opacity 代表透明度,值为0-1之间的小数,值越大透明度越低。
.filter{ filter: opacity(.3); }
如下图展示:
blur
blur可以设置图片使用高斯模糊效果,单位值是px。所谓高斯模糊,就是指一个图像与二维高斯分布的概率密度函数做卷积。
简单点说:高斯模糊常常用来模拟人眼中的物体变远、变快的效果。在照片处理中,我们常常将背景施以高斯模糊,使得背景仿佛变远了,从而突出前景的人物或物体。一些所谓“先拍照,后对焦”的技术利用的也是高斯模糊这个效果。若想弄出视点飞快移动的效果,也可以对背景使用高斯模糊。
.filter { filter: blur(2px); }
invert
invert 可以设定反色, 值为0-1之间的小数。
.filter { filter: invert(1); }
saturate
saturate可以设定照片饱和度,取值范围为数字即可,默认值1,即100%。
.filter { filter: saturate(5); }
比如这里我设置饱和度是500%,如下图效果:
grayscale
grayscale代表灰度,取值在0-1之间,。
.filter { filter: grayscale(1); }
下图是grayscale为1,即灰度是100%时候的效果。
另外,如果使用该效果参数里没值的话,也会默认以1,即100%为值取值,即如下面设置。
.filter { filter: grayscale(); }
sepia
sepia代表的是照片褐色,类似于大部分美图软件里的怀旧功能的那种效果,取值也是0-1,和grayscale一样。
.filter { filter: sepia(1); }
hue-rotate
hue-rotate用来改变图片的色相,默认值为0deg,取值是角度(angle)。
.filter { filter: hue-rotate(90deg); }
hue-rotate一般配合css动画使用,可以呈现不一样效果。比如电池充电的动画,随着高度在纵坐标上移,hue-rotate的值逐渐改变,这里因为无法上传git图片,只能看下静态图片:
brightness
brightness可以改变图片的亮度,默认值为100%,即1。
.filter { filter: brightness(2); }
contrast
contrast代表对比度,这个属性取值和饱和度saturate类似,取值也是数字。
.filter { filter: contrast(2.5); }
这里我们演示对比度是250%时候的效果,如下图:
drop-shadow
drop-shadow这个属性类似于box-shadow,给图片加阴影。
.filter { filter: drop-shadow(20px 20px 10px 20px #000) /**水平阴影位置,垂直阴影位置,模糊距离,阴影颜色**/ }
backdrop-filter属性
我们回过头来在看backdrop-filter属性以下几点特点
backdrop-filter 是使透过该层的底部元素模糊化
backdrop-filter属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素 背后 的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳,尤其是安卓移动端。
上面这些只看文字不好理解,我直接上代码:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus voluptatem velit quod placeat? Cupiditate, corporis, et tempore laudantium consequatur labore distinctio nisi inventore totam vero cum est saepe quos ad
我们定义了一个container元素div,子元素有content和filter两个div元素。
body { margin: 0; padding: 0; } .container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: aqua; } .content { position: absolute; bottom: 40%; width: 300px; height: 300px; background-color: blueviolet; } .filter { position: absolute; bottom: 0; width: 100%; height: 50%; font-size: 32px; z-index: 20; }
以上元素,我们可以得到如下布局:
这时候,我们将filter元素改为
.filter { position: absolute; bottom: 0; width: 100%; height: 50%; filter: blur(5px); z-index: 20; font-size: 32px; }
从代码看,我们添加了filter: blur(5px)。如下图展示效果,我们发现filter元素div和其中的文字内容,都被模糊化了。
但如果如下修改样式
.filter { position: absolute; bottom: 0; width: 100%; height: 50%; backdrop-filter: blur(5px); z-index: 20; font-size: 32px; }
使用backdrop-filter: blur(5px)元素,则得到如下图排版
我们发现,只有filter元素DIV被模糊化,而子内容文字并没有受到任何影响。
.filter { position: absolute; bottom: 0; width: 100%; height: 50%; background-color: chocolate; backdrop-filter: blur(5px); z-index: 20; font-size: 32px; }
但是,如果按照以上代码,给filter元素设置了背景色background-color: chocolate,这时候,就几乎看不到模糊化的效果。
或者,我们把content元素DIV背景色去除,
.content { position: absolute; bottom: 40%; width: 300px; height: 300px; }
这就是为什么说,为了看到效果,必须使元素或其背景至少部分透明。
我们发现,backdrop-filter属性还只能在部分最新版浏览器上有效果,所以目前来看,此属性的兼容性较差。
以上就是关于“css中filter属性和backdrop-filter对比有什么区别”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联行业资讯频道。
标题名称:css中filter属性和backdrop-filter对比有什么区别
URL链接:http://scyanting.com/article/jhidco.html