html使用CSS3设置滤镜效果

87次阅读
没有评论

CSS3中提供了多种滤镜效果,例如模糊、灰度、色相旋转等。以下是一个示例,展示如何使用CSS3滤镜效果:
html使用CSS3设置滤镜效果
html使用CSS3设置滤镜效果

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3 Filter Example</title>
    <style>
        .img-filter {
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
<img src="https://www.itshiye.com/wp-content/uploads/2023/02/131902084-1-1.jpg" class="img-filter">
<img src="https://www.itshiye.com/wp-content/uploads/2023/02/131902084-1-1.jpg" class="img-filter1">
</body>
</html>

在上面的示例中,我们定义了一个CSS选择器.img-filter,然后使用filter属性将图像设置为100%的灰度。你可以在filter属性中设置不同的滤镜效果,例如blur(模糊)、hue-rotate(色相旋转)等,以及它们的不同参数。

以下是 所有CSS 滤镜效果的列表:

  1. blur():模糊图像
  2. brightness():调整图像亮度
  3. contrast():调整图像对比度
  4. drop-shadow():为图像添加阴影
  5. grayscale():将图像转换为灰度图像
  6. hue-rotate():旋转图像的色相
  7. invert():将图像颜色反转
  8. opacity():调整图像透明度
  9. saturate():调整图像饱和度
  10. sepia():将图像转换为深褐色
  11. backdrop-filter():为元素背景添加滤镜
  12. contrast():为元素背景调整对比度
  13. drop-shadow():为元素添加阴影
  14. grayscale():将元素转换为灰度
  15. hue-rotate():旋转元素的色相
  16. invert():将元素颜色反转
  17. opacity():调整元素透明度
  18. saturate():调整元素饱和度
  19. sepia():将元素转换为深褐色

需要注意的是,滤镜效果在不同浏览器上的支持程度可能会有所不同,因此在使用滤镜效果时需要做好兼容性工作。

正文完
 
评论(没有评论)