CSS滤镜

最新推荐文章于 2024-07-04 18:24:34 发布

别Null.了

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量350

点赞数 3

分类专栏： css学习文章标签： css

本文链接：https://blog.csdn.net/TangJing_/article/details/118027562

版权

css学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模糊效果

使用blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。

模糊实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: blur(2px);  /*设置图片的模糊效果，适应的是谷歌浏览器，针对不同的浏览器*/
        filter: blur(2px);   /*模糊效果，模糊度为5px*/
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

图像亮度

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

注意：75%接受以百分号表示的值（例如）的过滤器函数也接受以十进制表示的值（如0.75）。如果该值无效，该函数将返回none并且将不应用任何滤镜效果。

亮度实例：

<style>
    img{
        width: 300px;
        height: 260px;
        --webkit-filter: brightness(200%);   /*设置图片的亮度 */
         filter: brightness(200%);  
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

图像对比度

contrast()功能用于调整图像的对比度。值0%将创建全黑的图像。而值100%或1保持图像不变。还允许超过100％的值，从而提供对比度较低的结果。如果未提供参数，则使用值1。

对比度实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: contrast(200%);    /*设置图片的对比度，0则为全黑，1就是原图 */
        filter: contrast(200%); 
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

向图像添加阴影

可以使用drop-shadow()功能将阴影效果应用于Photoshop等图像。此功能类似于该box-shadow属性。

注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像该box-shadow属性一样，但有一个例外'inset'不允许使用关键字。

阴影实例：

<style>
    img{
        width: 300px;
        height: 260px;
/* 第一个参数水平的偏移度，第二个参数垂直的偏移度，第三个参数是阴影半径，第四个参数是阴影颜色*/
         -webkit-filter: drop-shadow(20px,2px,4px,red);  /*设置阴影*/ 
        filter: drop-shadow(20px,2px,4px,red);  
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

CSS图像灰度

使用grayscale()功能可以将图像转换为灰度。值100%完全是灰度。值0%保留图像不变。如果未提供参数，则使用值0。

灰度实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: grayscale(50%);   /*设置灰度 */
        filter: grayscale(50%);   
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

CSS反转效果

可以使用invert()函数将像Photoshop这样的反转效果应用于图像。 100％或1的值被完全反转。值为0％会使输入保持不变。 0％到100％之间的值是效果的线性乘数。如果未提供参数，则使用值0。不允许使用负值。

反转实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: invert(80%);   /*设置反转效果*/
         filter: invert(80%);   
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

CSS图像透明度

opacity()功能可用于为图像添加透明度。值0%是完全透明的。100%或1保持图像不变。如果未提供参数，则使用值1。此功能类似于该opacity属性。

透明度实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: opacity(50%);    /*设置透明度*/
        filter: opacity(50%);    
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

CSS图像棕褐色效果

用于给予图像老照片效果，可以使黑白照片具有较暖的色调（红棕色），以增强其存档质量。sepia()功能将图像转换为棕褐色。值100%或者1完全是深褐色。值0%保留图像不变。如果缺少参数，则使用值0。

棕褐色效果实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: sepia(50%);   /* 设置褐色效果*/
        filter: sepia(50%);   
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：

CSS图像饱和度

saturate()功能可用于调整图像的饱和度。值0%完全不饱和。值是100%保留图像不变。还允许值超过100％，从而提供超饱和结果。如果缺少参数，则使用值1。

饱和度实例：

<style>
    img{
        width: 300px;
        height: 260px;
        -webkit-filter: saturate(200%);   /*设置鲜明度，数值越高图像越鲜明*/
        filter: saturate(200%);    
}
</style>
<body>
    <img src="../media/5.jpg">
</body>

实例结果：