css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。
你以为这些是经过PS软件处理出来的?不不不,只有一张图片,纯粹的是用css写出来的。
本文的目标就是:手把手教大家学习CSS滤镜(filter)属性,CSS滤镜提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。
使用CSS滤镜只需要如下5步:
1. 准备工作
2. 使用sublime快速书写HTML结构
3. 使用CSS选择器选中目标标签
4. CSS滤镜的基本用法
5. CSS滤镜实例演示
一、第一步 —— 准备工作
目标 : 下载并安装sublime以及准备一张图片素材
下载对应你操作系统的sublime编辑器,http://www.sublimetext.com/3
图片素材:
小结 : 准备好代码编辑器,比如sublime,hbuilder,vscode等编辑,都是可以的,再准备一张图片素材
二、第二步 —— 书写HTML结构
目标 : 使用sublime编辑器快速生成HTML5结构的页面
1. 安装sublime以后,并打开sublime.exe
2. 在电脑的某个目下新建一个空目录code,将我们的图片素材放一个images文件夹下,并把这个images文件夹也放在code中
3. 使用sublime打开我们刚准备好的code文件夹
4. 使用sublime新建一个HTML网页文件,后缀名需要为html
5. 接着输入一个英文输入状态下的!再按tab键,即可快速生成HTML5的基本结构!
6. 在网页中插入内容
小结 : 使用代码编辑器新建网页文件,并加入两张img图片标签,正确引入图片
三、第三步 —— 使用CSS选择器选中目标标签
目标:使用CSS类选择器选中我们页面中的目标图片标签, 格式 .类名
小结 : 使用 css类选择 格式: .类名 选中对应的目标标签
四、第四步 —— CSS滤镜的基本用法
目标:了解CSS滤镜的基本用法以及各方法之间效果差异
1. CSS滤镜基本语法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
提示:允许同时使用多个滤镜,多个滤镜效果之间使用空格分隔。
2. CSS滤镜支持的方法(function)有
– grayscale 灰度
– sepia 褐色
– saturate 饱和度
– hue-rotate 色相旋转
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 对比度
– blur 模糊
– drop-shadow 阴影
注意:为了实现兼容性,我们加上-webkit- 前缀
-webkit-filter : function (param);
3. filter函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
小结 : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
五、第五步 —— CSS滤镜实例演示
目标:理解CSS滤镜各种效果之间的不同
1. 模糊: blur(长度值) 值越大越模糊 这个参数可设置css长度值,但不接受百分比值
filter : blur(2px);
-webkit-filter : blur(2px);
值越大越模糊
2. 亮度 : brightness(百分比) 如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
filter : brightness(30%);
-webkit-filter : brightness(30%);
3. 对比度 : contrast(%) 值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
filter : contrast(0);
-webkit-filter : contrast(0);
4. 阴影 : drop-shadows(阴影水平偏移位置 阴影垂直偏移位置 阴影模糊程度 阴影颜色)
/*drop-shadows(阴影水平偏移位置 阴影垂直偏移位置 阴影模糊程度 阴影颜色)*/
filter : drop-shadow(10px 10px 5px #000);
-webkit-filter : drop-shadow(10px 10px 5px #000);
5. 灰度 : grayscalel(%) 值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0
filter : grayscale(100%);
-webkit-filter : grayscale(100%);
6. 色相旋转 : hue-rotate(deg) deg为旋转度数,如果值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
filter : hue-rotate(50deg);
-webkit-filter : hue-rotate(50deg);
7. 反色 : invert(%) 如果100%的值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
filter : invert(100%);
-webkit-filter : invert(100%);
8. 透明度 : opacity(%) 值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
filter : opacity(.5);
-webkit-filter : opacity(.5);
9. 饱和度 : saturate(%) 值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
/*5代表500%*/
filter : saturate(5);
-webkit-filter : saturate(5);
10. 褐色(有种复古的旧照片感觉) : sepia(%) 值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
filter : sepia(100%);
-webkit-filter : sepia(100%);
11. 使用多个滤镜,每个滤镜使用空格分隔。 注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。 顺序有可能会导致效果不一样。
/*使用多个滤镜,每个滤镜使用空格分隔。*/
filter: contrast(200%) brightness(150%) hue-rotate(50deg);
-webkit-filter: contrast(200%) brightness(150%) hue-rotate(50deg);
小结 : filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px,px,px,color) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) ;
总结
到此,我们已经对CSS滤镜有了一定的初步了解,在以后开发过程中,可以根据我们所需要的效果,选择使用相应的CSS滤镜效果。
我们再来回顾一下,我们刚刚实现的步骤
1. 准备工作:下载sublime代码编辑器以及准备图片素材
2. 书写HTML基本结构:使用sublime创建一个HTML文件以后,输入!以后再按tab键,在body标签中插入相应标签,并正确引入图片
3. 使用CSS选择器选中目标标签:我们使用的是CSS类选择器,通过标签的class属性值获取目标标签
4. CSS滤镜的基本使用: CSS滤镜语法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
/*为了实现兼容性,我们加上-webkit- */
-webkit-filter : function (param);
-webkit-filter : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
/*提示: 允许多个滤镜,之间使用空格分隔。*/
5. CSS滤镜实例演示 : 通过代码演示,了解各个滤镜之间不同的效果
– grayscale 灰度
– sepia 褐色
– saturate 饱和度
– hue-rotate 色相旋转
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 对比度
– blur 模糊
– drop-shadow 阴影
css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...相关推荐
- css显示内容越来越模糊_55 个提高你 CSS 开发效率的必备片段
这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找 附笔记链接,阅读往期更多优质文章可移步查看:前端笔记本 清 ...
- css显示内容越来越模糊_55个提高你CSS开发效率的必备片段
(给JavaScript加星标,提升我的前端技能.) 作者:Eno_Yao https://github.com/Wscats/CV/issues/2 这篇文章会记录我们平时常用到的 CSS 片段,使 ...
- html怎么改变图片亮度,纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色 说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
- 利用CSS改变图片颜色的100种方法!
(给前端大全加星标,提升前端技能) 来源: 前端指南 前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同 ...
- html图片颜色变深,利用CSS改变图片颜色的100种方法!
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
- 为什么localstorage获取不到数据_纯干货!小白必看,为什么你微博超话引流不到人?揭秘在超话快速获取5000精准客源的引流实操方法...
星哥说引流,星哥说营销,星哥说社群 大家好,我是引流哥尹星. 今天给大家分享的是一个通过微博给微信精准引流的玩法. 玩转微博超级话题快速获取5000精准客源,实操方法和注意事项 全文2000字左右,耐 ...
- html如何加深图片,css怎么改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix- ...
- html中改变一张图片的颜色,简单的 css 改变图片颜色
当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色. 熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mi ...
- 显卡的指标有哪些方面_纯干货!显卡购买重要参数:老司机勿入
1你是N饭还是A饭? 近年来随着电竞游戏及单机大作的加速发布,游戏对显卡性能的需求越来越高,而最新的GTX 10系新品与RX VEGA系相较于上一代产品性能也有了质的提升,这让很多游戏玩家有了升级显卡 ...
最新文章
- MySQL5.7 : 对隐式锁转换的优化
- Sam Hartman 当选 Debian 社区领导人
- python 中 property 属性的讲解及应用
- java中获取文件总行数_关于java:如何以有效的方式获取文件中的行数?
- 第10章 例题 7-4 汉诺(Hanoi)塔问题
- python 内置递归
- Linq之隐式类型、自动属性、初始化器、匿名类
- 怎样把java换主题_如何为Eclipse安装主题(Color Theme)
- echarts我常用的参数总结
- 【POJ - 3125 】Printer Queue(模拟,队列+优先队列,STL)
- c#ref和out的相同点_C#中ref和out的使用小结
- 抓包获取百度音乐API
- vue项目引入三方字体
- 域控服务器的ip地址,域控更改ip地址问题
- 打造高可用iOS进度条
- 数字绿土参加2017美国地球物理联合会(AGU)年会
- MLIR再深入 —— CodeGen 总结
- U盘安装Ubuntu——关于UltraISO打开Ubuntu只有EFI文件夹的解决方法
- 【转】流媒体技术笔记(视频编码相关)
- 北京信息科技大学计算机研究生在哪个校区,北京信息科技大学有几个校区,哪个校区最好及各校区介绍...
热门文章
- python绘图库seaborn_Matplotlib Toolkits:python高级绘图库seaborn
- python 艺术照片滤镜_Python实现PS滤镜Fish lens图像扭曲效果示例
- 东北师范计算机研究生课表,东北师范大学全日制工程硕士(计算机技术)专业学位研究生实践教学管理办法...
- html怎么实现单个li效果,JS+CSS实现的一个li:hover效果
- c++排序函数_Excel2010 技巧六 (排名函数)
- ssm整合oracle分页,java实现ssm分页工具类及其使用方法
- AC自动机(python)
- python实现字符串匹配算法BF,BF改,KMP
- adcetris研发历程_抗体类药物质量控制—张伯彦20130730.pdf
- Python第六次作业