图片滤镜、灰度处理

最新推荐文章于 2024-05-23 22:59:55 发布

VIP文章一只有梦想的笨鸟

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量153

点赞数

分类专栏： CSS、SASS、SCSS 文章标签： css safari 前端

本文链接：https://blog.csdn.net/Zfang678/article/details/122128127

版权

参考： CSS3 filter(滤镜) 属性 | 菜鸟教程

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
</style>
</head>
<body>

<p>图片转为黑白色:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<p><strong>注意:</strong> Interne