css3 filter(滤镜) 属性
时间: 2023-06-05 07:47:32 浏览: 87
CSS3的滤镜是指一种应用于HTML元素的视觉效果,通过一定的滤镜属性可以改变 HTML 元素的颜色、亮度、对比度等特性,进而实现一些特殊的视觉效果。常见的滤镜属性包括: blur(模糊)、brightness(亮度)、contrast(对比度)、grayscale(灰度)、hue-rotate(色相旋转)、invert(反相)、opacity(不透明度)和saturate(饱和度)。
相关问题
css3 filter
CSS3 filter是一组属性,用于为图像添加各种视觉效果和滤镜效果。它可以实现模糊、亮度调节、对比度调节、阴影设置、灰度、色相旋转、反转图像输入、透明度、饱和度和褐色转化等效果。
其中,filter:blur(px)可以使用高斯模糊效果,filter:brightness(%)可以调节亮度,filter:contrast(%)可以调节对比度,filter:drop-shadow(offset-x offset-y blur spread color)可以设置阴影,filter:grayscale(%)可以实现灰度效果,filter:hue-rotate(deg)可以应用色相旋转,filter:invert(%)可以反转图像输入,filter:opacity(%)可以调节透明度,filter:saturate(%)可以调节饱和度,filter:sepia(%)可以进行褐色转化。
例如,filter:hue-rotate(55deg)可以根据色相环的度数对应相应的颜色。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css3 filter滤镜属性制作图片滤镜特效 ](https://download.csdn.net/download/siwim/11984144)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [CSS3 filter滤镜详解](https://blog.csdn.net/pycharm_k/article/details/105583337)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [CSS3的filter属性](https://blog.csdn.net/qq_44849271/article/details/120113819)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
CSS3 -webkit-filter 滤镜效果
CSS3 中的 -webkit-filter 是一个用于添加滤镜效果的属性,它可以让开发者通过 CSS 代码来实现类似于照片编辑软件中的一些效果,例如模糊、变亮、变暗、灰度化等等。
具体来说,-webkit-filter 可以接受多个参数,包括 blur(模糊)、brightness(亮度)、contrast(对比度)、grayscale(灰度化)、hue-rotate(色相旋转)、invert(反色)、opacity(透明度)、saturate(饱和度)、sepia(棕褐色效果)等等。
例如,下面的代码可以将一个图片变成灰色:
```
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
```
需要注意的是,-webkit-filter 属性只在 WebKit 浏览器中生效,如果要兼容其他浏览器,还需要添加对应的 filter 属性。