Css中的filter常用滤镜属性及语句大全
2025-04-26 22:57
Html/Css
122
1
0
0
标题录入
封面图
在 CSS 中,`filter` 属性允许开发者对元素应用图形效果(如模糊、颜色转换等)。以下是一些常用的 `filter` 属性及其用法: ### 1. `blur(px)` - **描述**: 对图像应用高斯模糊。 - **语法**: `filter: blur(px);` - **示例**: ```css img { filter: blur(5px); } ``` ### 2. `brightness(%)` - **描述**: 调整图像的亮度。值为 100% 是默认值,表示原始图像;小于 100% 会变暗,大于 100% 会变亮。 - **语法**: `filter: brightness(%);` - **示例**: ```css img { filter: brightness(50%); } ``` ### 3. `contrast(%)` - **描述**: 调整图像的对比度。值为 100% 是默认值,表示原始图像;小于 100% 会降低对比度,大于 100% 会增加对比度。 - **语法**: `filter: contrast(%);` - **示例**: ```css img { filter: contrast(200%); } ``` ### 4. `drop-shadow(h-shadow v-shadow blur spread color)` - **描述**: 向元素添加阴影。类似于 `box-shadow`,但它不会影响布局。 - **语法**: `filter: drop-shadow(h-shadow v-shadow blur spread color);` - **示例**: ```css img { filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5)); } ``` ### 5. `grayscale(%)` - **描述**: 将图像转换为灰度图像。值为 100% 是完全灰度,0% 或 100% 是原始图像。 - **语法**: `filter: grayscale(%);` - **示例**: ```css img { filter: grayscale(50%); } ``` ### 6. `hue-rotate(deg)` - **描述**: 给图像应用色相旋转。值以度数表示,0deg 表示无变化,360deg 回到原始状态。 - **语法**: `filter: hue-rotate(deg);` - **示例**: ```css img { filter: hue-rotate(90deg); } ``` ### 7. `invert(%)` - **描述**: 将图像转换为负片效果。值为 100% 是完全反转,0% 是原始图像。 - **语法**: `filter: invert(%);` - **示例**: ```css img { filter: invert(100%); } ``` ### 8. `opacity(%)` - **描述**: 设置图像的透明度。值为 100% 是完全不透明,0% 是完全透明。 - **语法**: `filter: opacity(%);` - **示例**: ```css img { filter: opacity(50%); } ``` ### 9. `saturate(%)` - **描述**: 设置图像的饱和度。值为 100% 是原始图像,小于 100% 会降低饱和度,大于 100% 会增加饱和度。 - **语法**: `filter: saturate(%);` - **示例**: ```css img { filter: saturate(200%); } ``` ### 10. `sepia(%)` - **描述**: 将图像转换为 sepia 风格。值为 100% 是完全 sepia,0% 是原始图像。 - **语法**: `filter: sepia(%);` - **示例**: ```css img { filter: sepia(50%); } ``` ### 组合使用 多个 `filter` 效果可以组合使用,效果会按顺序叠加: ```css img { filter: brightness(50%) contrast(200%) blur(5px); } ``` ### 浏览器兼容性 大多数现代浏览器都支持 `filter` 属性,但为了确保兼容性,建议在需要时使用前缀 `-webkit-`。 ```css img { -webkit-filter: blur(5px); /* Safari 和 Chrome */ filter: blur(5px); } ``` 以上是 CSS `filter` 属性的一些常用功能和示例,可以根据需求灵活使用这些滤镜来增强网页的视觉效果。
上一篇:
DIV+CSS常用的Html网页布局代码
下一篇:
css网页制作实用技巧9则
标题录入,一次不能超过6条
区块链
T:0.012934s,M:247.3 KB
返回顶部
留言
留言
评论