CSS滤镜和CSS精灵

最新推荐文章于 2024-04-18 14:13:00 发布

THER1881

最新推荐文章于 2024-04-18 14:13:00 发布

阅读量342

点赞数

文章标签： css photoshop 前端

本文链接：https://blog.csdn.net/thwr1881/article/details/124575427

版权

本文详细介绍了CSS3的滤镜效果，包括模糊、亮度、对比度、阴影等，并展示了如何应用这些效果。同时，文章还阐述了CSS精灵的概念，这是一种将多个小图片合并成一张大图以减少HTTP请求的技术，对于网页加载速度有显著提升。

摘要由CSDN通过智能技术生成

一、CSS3的滤镜(Filters)

CSS3滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。
可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。主要适用于不熟练掌握Photoshop技术的人员。

警告：任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。

1、模糊效果

像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3滤镜</title>
</head>
<style>
    img{
   
        filter: blur(5px);
    }
</style>
<body>
    <img src="./8.png" alt="">
</body>
</html>

如图：
在这里插入图片描述

2、设置图像亮度

brightness()功能可用于设置图像的亮度。值0%将创建全黑的图像。而值100%或1使图像不变。还可以将亮度设置为高于100％，这样可以使图像更亮。如果未提供参数，则使用值1。不允许使用负值。
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3滤镜</title>
</head>
<style>
    img{
   
        filter: brightness(200%);
    }

最低0.47元/天解锁文章

THER1881

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS滤镜和CSS精灵

一、CSS3的滤镜(Filters)CSS3滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。主要适用于不熟练掌握Photoshop技术的人员。警告：任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。1、模糊效果像高斯模糊效果这样的Photoshop可以使用该
复制链接

扫一扫