css中filter属性和backdrop-filter的应用与区别详解_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

filter:none可以这么写试试看,直接追加一个class加到原来的class后面,然后在追加的class里面设置你需要修改的值就可以了www.zgxue.com防采集请勿采集本网。

filter和backdrop-filter具有一定区别: Filter不仅仅作用于当前元素,后代元素也会继承这个属性,作用于一个空背景元素则没有效果。 backdrop-filter 是使透过该层的底部元素模糊化 backdrop-filter属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素 背后 的所有元素,为了看到效果,必须使元素或其背景至少部分透明。 backdrop-filter目前兼容性不佳,尤其是安卓移动端。

设置list-style-type就可以了~~ 可以设置为圆点、数字序号等等,也可以使用图片~~

filter属性

html应用的CSS只能是class,cssClass是在某些动态编程(网络设计)语言中的控件属性,并非html的标签属性,虽然最终仍会解析成class,但是在设计之初仍然要用css

我们先来说说filter属性,css3中的filter属性简单易用且强大,这些效果作用在图片上可以实现一些特有的特效。而且目前主流浏览器都已经支持了这个属性。

你在加一个 uri.endWith(".css");就好了

从上图来看,大部分浏览器的兼容性都是不错的。

filter类似的滤镜火狐是不支持的, 只有IE支持他。 想实现类似的功能,需要使用其他手段~~

我们还是直接用代码来看。

filter是ie的私有属性,不是w3标准属性,所以不能识别 只要网页能达到要的效果就可以了,不用管提示 ———————————————————————— 好心提醒一下,现在css3已经很普及了,css3简单、效果又好 用filter只能满足ie效果,但是chrome、safari、firefox、

body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center;}.img { width: 500px; height: 500px;}

<body> <img src="./img/kyoto.jpg" class="img filter"></body>

我们定义一张照片在网页中央,先不做任何处理。

这是原图呈现的效果。

接下来我们看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目前兼容性不佳,尤其是安卓移动端。

上面这些只看文字不好理解,我直接上代码:

<div class="container"> <div class="content"></div> <div class="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 </div></div>

我们定义了一个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内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

filter:blur(0px)可以加一些前缀使其兼容如有疑问欢迎追问追问这个是当前元素的模糊,想要的是除当前元素外的其他元素的模糊。可以用filter实现一幅图片的部分毛玻璃效果,但是不能多个元素同时模糊。追答懂你意思了 你浮窗出现之前在出现一个div是整个屏幕大小然后设置模糊固定定位 然后你的浮窗z-index设置的比div大就可以了这里我简写 为你提供一下思路div position:fixed z-index:2 filter:blur(20px) width:屏宽 height:屏高 浮窗 z-index:99,先说结论:无论用filter还是2113backdrop-filter方案,都无法完5261美;filter方案:其本身是模糊自己4102,而不是模糊被弹窗遮挡1653的元素。而且实现起来必须要有一个单独的层,用来实现毛玻璃效果;可是这个毛玻璃的效果,不会随着被遮挡层的内容变化而变化。优点是兼容性好,缺点是被遮挡内容必须是固定不变的。本质上属于障眼法,完全不解决问题;backdrop-filter方案:优点是完美解决需求,就是要的这个样子,实现只需两行代码。缺点很要命,ie直接不支持(edge貌似可以);其他桌面浏览器只有在比较高级的版本才支持;作为前端工程师,应该惩前毖后,对于ie这种老古董冥顽不化的,直接要抛弃。要么升级电脑,要么不要想在ie实现功能;内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解css3 filter:drop-shadow滤镜与box-shadow区别与应用
  • 使用css的filter写鼠标滑过效果的实现示例
  • 通过css3的filter滤镜改变png图片的颜色的示例代码
  • css3 中filter(滤镜)属性使用详解
  • css filter:hue-rotate色调旋转滤镜实现按钮批量生产
  • css中filter属性的使用详解
  • 微信小程序 css filter(滤镜)的使用示例详解
  • 详解css3中强大的filter(滤镜)属性
  • 详解css透明opacity和ie各版本透明度滤镜filter的最准确用法
  • 使用css3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
  • 如何使用css的backdrop-filter样式,或者替代方法?
  • 第三方UIcss中使用了filter属性,我需要给这个div...
  • 网页制作中CSS设置里background和backgroun-image...
  • 网页设计与网站制作这门课程第六章CSS常用属性的知...
  • 在网页设计与制作中怎样运用CSS样式中的列表属性
  • 应用css样式的时候,class属性和cssClass属性有什...
  • 为什么我加上地址过滤filter以后 ,我的CSS样式就...
  • 在CSS样式表中为什么filter属性不能用?
  • 有vs2010设计网页时,编写css弹出错误“filter”不是...
  • css属性选择器中*=和~=有什么区别呢?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程cssfiltercss3 中filter(滤镜)属性使用详解详解css3中强大的filter(滤镜)属性详解css透明opacity和ie各版本透明度滤镜filter的最准确用法使用css3滤镜的filter:blur属性制作毛玻璃模糊效果的方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css textarea 高度自适应,无滚动条css 水平居中并限定最大的宽度实现详解css清除图片下几像素空白间隙的方法 css中三角形的绘制与巧妙应用实例详解css等比例分割父级容器(完美三等分)的实现详解如何使用css选择所有子元素css选中父元素下的第一个子元素(:first-child)详解css-opacity子元素继承父元素透明度的解决方法浅谈css动画是否会被js阻塞html+css+js实现堆叠轮播效果的示例代码浅谈css当中:focus-within的好玩之处
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved