CSS3滤镜--filter使用

最新推荐文章于 2022-12-27 15:02:17 发布
最新推荐文章于 2022-12-27 15:02:17 发布
阅读量201 收藏
点赞数
文章标签： css3滤镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44293690/article/details/86243914
版权

CSS3滤镜主要是对图片做处理。常用效果如下：

  1. 设置图片灰度：grayscale
    示例代码：
 <style>
        .container{
            display: flex;
        }
        .container div{
            margin-left: 50px;
        }
        .container div img{
	    width:500px;
	    height: 400px;
	}
       .img2{
           -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
            filter:grayscale(50%);  //50%的灰度
        }
        .img3{
            -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
            filter:grayscale(100%);  //灰度100%，图片变成灰白色
        }
    </style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>50%灰度：</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>100%灰度：</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

效果：
在这里插入图片描述

  1. 设置图片模糊度：blur
    示例代码：
 <style>
        .container{
            display: flex;
        }
        .container div{
            margin-left: 50px;;
        }
        .container div img{
	    width:500px;
	    height: 400px;;
	}
	.img2{
            filter:blur(2px);  //使用高斯模糊
        }
        .img3{
            filter:blur(5px);
        }
    </style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>高斯模糊：模糊2个像素</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>高斯模糊：模糊5个像素</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

效果：
在这里插入图片描述
3. 设置图片亮度：brightness
示例代码：

<style>
    .container{
        display: flex;
    }
    .container div{
        margin-left: 50px;;
    }
    .container div img{
        width:500px;
        height: 400px;;
    }
    .img2{
        filter:brightness(50%);   //比原图变暗
    }
    .img3{
        filter:brightness(200%);  // 默认值100%，超过100%比原图变亮
    }
</style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>设置图片亮度：brightness(50%)</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>设置图片亮度：brightness(200%)</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

效果：
在这里插入图片描述
4. 调整图像的对比度：contrast
示例：

<style>
    .container{
        display: flex;
    }
    .container div{
        margin-left: 50px;;
    }
    .container div img{
        width:500px;
        height: 400px;;
    }
    .img2{
        filter:contrast(50%);
    }
    .img3{
        filter:contrast(200%); //调整图像的对比度
    }
</style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>设置图像的对比度：contrast(50%)</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>设置图像的对比度：contrast(200%)</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

在这里插入图片描述
5. 给图像设置阴影效果：drop-shadow
示例：

<style>
    .container{
        display: flex;
    }
    .container div{
        margin-left: 50px;;
    }
    .container div img{
        width:500px;
        height: 400px;;
    }
    .img2{
        filter: drop-shadow(8px 8px 20px red); //给图像设置一个阴影效果
    }
    .img3{
        filter:drop-shadow(8px -8px 10px gray);
    }
</style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>给图像设置一个阴影效果：</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>给图像设置一个阴影效果：</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

效果：
在这里插入图片描述
6. 给图像应用色相旋转: hue-rotate
示例：

<style>
    .container{
        display: flex;
    }
    .container div{
        margin-left: 50px;;
    }
    .container div img{
        width:500px;
        height: 400px;;
    }
    .img2{
        filter:hue-rotate(90deg);
    }
    .img3{
        filter:hue-rotate(40deg);//给图像应用色相旋转
    }
</style>
<body>
<div class="container">
    <div>
        <p>原图：</p>
        <img src="./images/2.jpg" alt="">
    </div>
    <div>
        <p>给图像应用色相旋转：hue-rotate(90deg)</p>
        <img class="img2" src="./images/2.jpg" alt="">
    </div>
   <div>
       <p>给图像应用色相旋转：hue-rotate(40deg)</p>
       <img class="img3" src="./images/2.jpg" alt="">
   </div>
</div>
</body>

效果:
在这里插入图片描述
7. 反转输入图像:invert

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, 
	Opera */
   
    filter: invert(100%);
}
  1. 设置图像的透明程度: opacity
img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
       filter: opacity(30%);
}
  1. 将图像转换为深褐色：sepia
img {
    filter: sepia(100%);
}
  1. 设置图像饱和度: saturate
img {
      filter: saturate(800%);
}
小小弯_Shelby
关注
CSS——滤镜（filter ）
YANGMENGZHENG的博客
10-27 3965
前言 滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。 一、什么是滤镜 对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。 二、滤镜的实现---filter属性 1、CSS语法 filter: none | blur() | brightness(.
css3为图片添加滤镜(filter)
low666的博客
05-07 1842
css3为图片添加滤镜(filter) css3 filter语法解析 filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url(); 属性 解释 举例 ...
css的filter方法，给图片添加滤镜
Cupid
09-23 1102
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width...
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
css中filter过滤修改图片
beichen3997的博客
11-30 784
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .img{ /* filter:blur( ) 高斯模糊 */ /* filter:blur(2px
CSS3 滤镜 webkit-filter详细介绍及使用方法
01-19
大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣，其实 CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，...
CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例
05-08
但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在Chrome, Safari, Opera中使用 -webkit-filter，而微信小程序里使用的话，使用filter就可以了。一时间好奇了下，就多试了几个函数，以下是...
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
12-16
在前端开发中，CSS3滤镜提供了一种强大的方式来改变元素的视觉表现，其中`filter: blur()`属性尤其引人注目。它允许我们为元素添加模糊效果，从而创造出各种创意设计，如毛玻璃（也称为磨砂玻璃或模糊背景）效果。...
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
01-21
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不一 CSS3 box-shadow从...
css filter属性
emmmmmmm__的博客
12-07 223
这个 filter 属性是不是很神奇，我们来看看这个属性的特点： filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。grayscale 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；saturate 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设
CSS实现的滤镜效果
超浓芝士味玉米片的博客
05-30 1375
滤镜效果如图 CSS部分 /* 实现滤镜关键CSS样式 */ [data-filter*=image-]{flex:0 1 20%;line-height:0;position:relative;z-index:0;} [data-filter*=image-] img{height:auto;width:100%;} [data-filter="image-grays
CSS3 Filter
未名胡的博客
11-24 547
需要说明的是，这是一篇译文，原文地址 . Image Adjustment with CSS Filter Effects 调整图片的亮度和对比度，或者将图片变成灰色或棕褐色是一种在图片编辑软件中常见的行为， 比如说 Photoshop. 但是现在已经可以利用 CSS 给网页上的图片添加相同的特性。 而这种能力来源于 Filter Effects， 实际上这是一种还处在草案阶
CSS filter滤镜属性使用
最新发布
YunWisdom
12-27 1万+
CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。
CSS3滤镜——页面黑白灰度处理
Crane的博客
04-08 4306
每当遭遇重大灾难，比如之前的非典、汶川地震，以及前几天清明节对新冠肺炎逝世同胞的哀悼，各大主流网站也会呈黑白两色。今天偶然搜了下实现机制，原来是如此的简单，也对之前不怎么了解的滤镜刮目相看了。 将以下样式代码放到页面中即可实现页面黑白处理，这是CSS3滤镜中的灰度滤镜（grayscale）。 html,body { -webkit-filter: grayscale(1); /* C...
页面整体变为灰色 -- CSS3 filter(滤镜) 属性
beijixing333y的博客
12-01 1054
CSS3 filter(滤镜)
css的filter属性
苏苏就是小苏苏的博客
09-07 534
1.官方文档 注意：Internet Explorer 不支持 filter 属性 https://www.runoob.com/cssref/css3-pr-filter.html 2属性 2.1 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 2.2brightness 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更
CSS3 图片滤镜
abxn2002的专栏
02-01 1589
转载地址:http://www.zhanxin.info/development/2012-12-19-css-filter.html 对图片的处理有很多方法，今天介绍下 CSS3 的图片滤镜。例如灰度，模糊，饱和，老照片等图片滤镜效果。 我们可以使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持，建议使用 chrome 阅读，demo 可见)
CSS3中强大的filter(滤镜)属性
九天翔龙的技术博客
08-19 1万+
  filter(滤镜)属性，是CSS3中非常有意思的一个属性，可惜IE不支持（当然IE有它专属的滤镜方式）。无所谓，反正IE已经日薄西山。当然，强迫症的同学还是可以在网上找到与CSS3 filter对应的IE滤镜方式，不过这篇文章就不提了。 1、模糊滤镜 blur(Npx) 给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊； filter:blur(4px); 不过，bl...
html中filter属性,CSS3 中filter（滤镜）属性使用详解
weixin_30335379的博客
06-04 1315
最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。使用滤镜：前言css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。浏览器支持情况：只有IE浏览器不支持fil...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值