使用CSS过滤效果来改变图片样式

最新推荐文章于 2021-06-08 17:46:26 发布
最新推荐文章于 2021-06-08 17:46:26 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： css 文章标签： css
本文介绍了如何使用CSS来调整图像的亮度、对比度、灰度、颜色效果等，包括grayscale、sepia、brightness、contrast等特性，并展示了具体的应用案例。
  1. </pre><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;">   我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用<a target=_blank target="_blank" href="http://www.itdriver.cn/" style="color: rgb(16, 138, 198);"><span style="color: rgb(0, 0, 0);">CSS</span></a>来给web图像添加相同的效果。</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;">首先我们先在网页中显示一张图片,html代码如下：</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; line-height:25.1875px"></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; line-height:25.1875px"></p><pre code_snippet_id="456178" snippet_file_name="blog_20140822_2_4956469" name="code" class="html"><!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="styles.css" media="screen">
  6. <title>CSS3实战开发:使用CSS过滤效果来改变图片样式</title>
  7. </head>
  8. <body>
  9. <!-- css教程,css3教程,html5教程,jQuery教程,javascript教程,视频教程,特效开发,css3特效,css特效,jQuery特效 -->
  10. <img src="20140821.jpg"  width="800" />
  11. </body>
  12. </html>
复制代码
此时运行效果图如下：


210114339879235.png


下面我给大家介绍相应特性，同时给各位演示应用图片过滤样式之后的效果图。
一、调整图像灰阶度：grayscale，范围为0%-100%。应用样式代码如下：

  1. img {  
  2.      -webkit-filter: grayscale(100%);  
  3. }  
复制代码
此时页面效果为：

210123260493318.png


二、给图片应用深褐色效果：sepia，范围0-100%语法代码如下：

  1. img {  
  2.      -webkit-filter: sepia(100%);  
  3. }
复制代码

此时运行页面效果：

210127346591902.png

三、调整图片曝光度：brightness，范围0%-100%，语法代码如下：

  1. img {  
  2.     -webkit-filter: brightness(40%);   
  3. }
复制代码
运行页面，效果如下：

210130014718155.png

四、调整图像对比度：contrast，语法代码如下：

  1. img {  
  2.     -webkit-filter: contrast(500%);   
  3. }  
复制代码

页面效果如下：

210134142683186.png

最后给大家介绍一个模糊特效：blur，语法代码如下：

  1. img {  
  2.     -webkit-filter: blur(2px);   
  3. }
复制代码

此时页面效果如下：

210136589561565.png

当然，上面的这些特性是可以同时使用的，比如，当鼠标划过图片时，将图片变成灰色的，且模糊图片，则代码如下：

  1. img:hover {  
  2.     -webkit-filter:grayscale(100%) blur(2px);   
  3. }
复制代码

此时页面效果为：

210140042219431.png

原来用CSS特性完成Photoshop的功能是如此简单。
CSS3 - filter(图像滤镜)
🏆 前端领域优质创作者
09-24 2626
前言 该函数为图片做一些视觉上的处理，fillter() 支持以下图像滤镜处理： 语法 描述 none 默认值，没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 brightness(%) 给图片应用一种线...
在CSS中编辑图像：过滤器
代码教主
06-12 453
考虑一种情况，您的网站上必须具有高对比度，模糊或明亮的特定图像版本。 在使用CSS过滤器之前，您唯一的选择是上传这些图像的不同版本或使用JavaScript处理图像。 除非您要操纵原始图像中的像素，否则CSS过滤器将提供一种简单的方法。 让我们从本教程开始，简要讨论所有可用的过滤器。 模糊滤镜 此滤镜将对图像应用高斯模糊。 您将必须提供一个长度值，该值将确定需要混合多少像素。 这意味着...
CSS3图片过滤器
weixin_42716535的博客
05-22 524
CSS3图片过滤器 <style> .a{ /* blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； */ filter: blur(8px) } .b{ /*brightness...
利用CSS设计图像样式
honeygirl_的博客
10-29 640
设计图像样式 一、定义图像大小： 二、定义图像边框： 三、定义不透明度： opacity:0-1 /取值范围是0-1值越小，透明度越高，0为完全透明/ 四、定义圆角特效： 五、定义阴影特效： 代码如下： <html> <head> <style type='text/css'> /*.w200{ ...
css 图片使用过滤器
Luckyzhoufangbing的博客
10-28 382
需求背景：如果优惠券不可用，则图片置灰，使用css filter 过滤器～ // 修改所有图片的颜色为黑白 (100% 灰度): .grey { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 给图片添加以上样式即可～ ...
通过css改变图片显示的内容
好风的老巢
01-16 410
这种情况主要用于需要更换皮肤的地方，需要将图片的资源写在css里面。真正的资源是在 background:url(xxxxx);中，src属性中的是一张透明的图片而已 不多说了，代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
css3图片过滤效果.rar_css3图片过滤效果_writerxpj
09-23
通过这个资源，我们可以学习如何使用CSS3滤镜来改变图像的外观，比如添加模糊、淡入淡出效果等。 CSS3滤镜是一种强大的工具，它允许开发者在不使用图像编辑软件的情况下，直接在网页上实时编辑和调整图像的视觉效果...
纯css3图片分类过滤效果
12-13
总的来说，"纯css3图片分类过滤效果"是一个结合了CSS3高级特性的实用插件，它展示了CSS3在网页动态效果和交互性方面的强大能力。通过深入理解并实践这些技术，开发者可以创建出更加吸引人且用户体验优良的网页应用。
css3图片过滤效果.zip
11-17
本教程将深入探讨如何使用CSS3滤镜来实现图片过滤，同时也会涉及JavaScript和jQuery在动态调整滤镜效果时的应用，以及与HTML5元素的结合。 首先，让我们了解CSS3滤镜的基础。CSS3滤镜是通过`filter`属性实现的，它...
HTML5+CSS实现图片过滤特效
04-06
本文将深入探讨如何使用HTML5和CSS来实现类似Instagram的图片过滤特效，帮助你创建出引人入胜的用户体验。 首先，HTML5在图像处理方面的提升为实现图片过滤提供了基础。HTML5新增了`<canvas>`元素，它允许我们在...
CSS3图片过滤分类功能
11-24
在网页设计领域，CSS3（Cascading Style Sheets Level 3）是一项重要的技术，它极大地扩展了样式表语言的能力，其中包括了一种独特的特性——图片过滤效果。这些过滤效果允许开发者对图像应用各种视觉变换，为用户...
css3图片过滤效果
w1366352655的博客
12-05 627
css3图片过滤效果 在线演示 本地下载 posted @ 2018-12-05 18:24 栖息地 阅读(...) 评论(...) 编辑 收藏
html 图片 滤镜,如何使用CSS实现图像滤镜效果？
weixin_29105429的博客
06-08 664
使用CSS filter属性，可以将类似Photoshop的滤镜效果应用于图像和内容；滤镜效果包括例如模糊效果，阴影，色彩变换和操作，如饱和/去饱和色等。该filter属性定义了元素(通常是)的可视效果，此属性主要用于图像内容。filter属性是将过滤器效果应用于web页面上的元素(主要是图像)的CSS方法。filter: none|blur()|brightness()|contrast()|d...
css3新特性：图片过滤器
Bidding
12-20 590
css3新特性：图片过滤器 img{ -webkit-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ; } 可以使用多个过滤器，用空格分开...
css中filter过滤修改图片
beichen3997的博客
11-30 866
&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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值