一、滤镜是什么

二、滤镜操作

1. 模糊效果

2. 亮度

3. 对比度

黑白效果可以使用该功能配合灰度实现

4. 图像阴影

5. 图像灰度

6. 反转效果

效果类似底片

7. 透明度

8. 棕褐色效果

9. 图像饱和度

三、实战项目

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滤镜</title>
</head>
<style>img{width: 300px;height: 300px; }.p1{/* 参数表述模糊的半径，值越大，图像越模糊 */filter: blur(3px);/* 不同内核的浏览器，这个是用来提高兼容性的 */-webkit-fliter:blur(3px);}.p2{/* 滤镜效果：亮度，最大为200%，此时为白色 */filter: brightness(50%);}.p3{/* 图形的对比度,0全黑，1或者100表示不变 */filter: contrast(150%);}.p4{/* 把图片换成圆形 */border-radius: 50%;/* 参数：x（阴影在水平的偏移量）,y（阴影在垂直方向的偏移量）,r（阴影半径）,c（阴影颜色） */filter: drop-shadow(10px 10px 5px silver);}.p5{/* 取值范围在0~100%,100%则为彻底洗去颜色的效果 */filter: grayscale(100%);}.p6{/* 颜色反转效果,取值范围在0~100% */filter: invert(100%);}.p7{/* 设置透明度，0表示完全透明，1表示透明度不变 */filter: opacity(80%);}.p8{/* 0表示不变，100%或者1带褐色效果，像是老照片 */filter: sepia(50%);}.p9{/* 图像饱和度，0表示不饱和，100%表示图像不变，取值可以超过100% */filter: saturate(200%);}
</style>
<body><img class="p1" src="../img/002.JPG" alt=""><img class="p2" src="../img/002.JPG" alt=""><img class="p3" src="../img/002.JPG" alt=""><img class="p4" src="../img/002.JPG" alt=""><img class="p5" src="../img/002.JPG" alt=""><img class="p6" src="../img/002.JPG" alt=""><img class="p7" src="../img/002.JPG" alt=""><img class="p8" src="../img/002.JPG" alt=""><img class="p9" src="../img/002.JPG" alt=""></body>
</html>

用CSS3实现滤镜——常见九种效果相关推荐

css3过渡（从一种效果到另一种效果的缓慢过度）
过渡(transition)是css3中具有颠覆性的特征之一,我们可以在不适用Flash动画或javascript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 过渡动画:是从一个状态 ...
大数据开发之常见九种数据分析方法
今天老师给大家分享一篇关于大数据开发常见的9种数据分析方法,首先数据分析是从数据中提取有价值信息的过程,过程中需要对数据进行各种处理和归类,只有掌握了正确的数据分类方法和数据处理模式,才能起到事半功倍 ...
【笔记】三张图读懂机器学习：基本概念、五大流派与九种常见算法
文章目录 [笔记]三张图读懂机器学习:基本概念.五大流派与九种常见算法 Chapter 1: A look at Machine learning 1.What is it? 2.How does m ...
串扰几种常见措施的效果及差异
转自:http://www.elecfans.com/d/739672.html Abstract:串扰是SI设计中较为重要的一个概念,如何在产品设计中保持信号在传递过程中不会受到周围信号的影响,同时 ...
九种 OOM 常见原因及解决方案(IT枫斗者)
九种 OOM 常见原因及解决方案(IT枫斗者) 什么是OOM? OOM,全称"Out Of Memory",翻译成中文就是"内存用完了",来源于java.lan ...
html css部分背景模糊效果,CSS3实现模糊背景的三种效果示例
不开头了,直接进入主题. 普通背景模糊效果如下: 使用属性: filter:(2px) 普通背景模糊为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边.也就是说 ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
软件开发的权限系统功能模块设计，分享主流的九种常见权限模型
软件系统的权限控制几乎是非常常见且必备的,这篇文章整理下常见的九种模型,几乎基本够你用了,主流的权限模型主要有以下9种: 1.ACL模型访问控制列表 2.DAC模型自主访问控制 3.MAC模型强 ...
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...

用CSS3实现滤镜——常见九种效果

文章目录

一、滤镜是什么

二、滤镜操作

1. 模糊效果

2. 亮度

3. 对比度

4. 图像阴影

5. 图像灰度

6. 反转效果

7. 透明度

8. 棕褐色效果

9. 图像饱和度

三、实战项目

用CSS3实现滤镜——常见九种效果相关推荐

最新文章

热门文章