文章目录
1. 滤镜
CSS3 滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。
可以使用 CSS3 filter属性将滤镜效果应用于元素，该属性按提供顺序接受一个或多个滤镜功能。
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |hue-rotate() | invert() | opacity() | sepia() | saturate() | url();
注：任何版本的 Internet Explorer 当前均不支持 CSS3 滤镜效果。较旧的 IE版本支持非标准 filter 属性来创建诸如不透明度之类的效果，但是该功能已被弃用。
1.1 模糊效果 filter: blur()
- 此函数接受 CSS 长度值作为定义模糊半径的参数。
- 较大的值将产生更多的模糊。
- 如果未提供参数，则使用值 0。
<style>
img{
width: 300px;
height: 260px;
-webkit-filter: blur(5px);/* Chrome Safari Opera */
filter: blur(5px);
}
</style>
<body>
<img src="../images/2.gif" alt="正在加载中">
</body>
1.2 设置图像亮度 filter: brightness()
- brightness()功能可用于设置图像的亮度。
- 值 0%将创建全黑的图像。
- 值 100%或 1 使图像不变。
- 可以将亮度设置为高于 100％，这样可以使图像更亮。
- 如果未提供参数，则使用值 1。不允许使用负值。
<style>
img{
width: 300px;
height: 260px;
-webkit-fil
最低0.47元/天 解锁文章
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
