css3图片过滤效果

最新推荐文章于 2023-08-09 18:57:47 发布
最新推荐文章于 2023-08-09 18:57:47 发布
阅读量568 收藏
点赞数
分类专栏： 前端技巧 CSS学习指南 文章标签： css3


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3图片过滤效果</title>
<style>
    body{
      background: #eee;
    }
img{ width:200px; height:150px;}
    .gallery{
      list-style: none;
      margin: 50px auto; padding: 0;
      width: 642px; /* (200+10+4)x3 */
      font-size: 0; /* fix inline-block spacing */
    }
    .gallery li{
        display: inline-block;
        *display: inline;
        zoom: 1;
        width: 200px; height: 150px;
        margin: 2px;
        border: 5px solid #fff;
        -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
        box-shadow: 0 2px 2px rgba(0,0,0,.1);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;       
    }

    .gallery:hover li:not(:hover){      
        -webkit-filter: blur(2px) grayscale(1);
        -moz-filter: blur(2px) grayscale(1);
        -o-filter: blur(2px) grayscale(1);
        -ms-filter: blur(2px) grayscale(1);
        filter: blur(2px) grayscale(1);
        opacity: .7; /* fallback */       
    }

    /* Demo page only */
    #about{
        color: #999;
        text-align: center;
        font: 0.9em Arial, Helvetica;
    }

    #about a{
        color: #777;
    }  
  </style>
</head>

<body>
  <ul class="gallery">
      <li><img src="/jscss/demoimg/wall3.jpg"></li>
      <li><img src="/jscss/demoimg/wall5.jpg"></li>
      <li><img src="/jscss/demoimg/wall7.jpg"></li>
  </ul>
</body>
</html>   

十三浪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 3.0中图片颜色过滤特效
越陌度阡
06-10 1297
给大家分享一个用CSS 3.0写的图片颜色过滤的特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 3.0
css3图片过滤效果.rar_css3图片过滤效果_writerxpj
09-23
css3图片过滤效果css3图片过滤模糊效果淡出淡入图片代码
css3为图片添加滤镜(filter)
low666的博客
05-07 1619
css3为图片添加滤镜(filter) css3 filter语法解析 filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url(); 属性 解释 举例 ...
CSS滤镜（filter详细介绍）
最新发布
zhp19513507633的博客
08-09 1004
filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。
css3图片模糊过滤效果
u011927449的博客
07-08 232
css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下HTML5中的CSS3技术。 体验效果：http://keleyi.com/a/bjad/yin8b5eb.htm代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
纯css3图片分类过滤效果
12-13
这是一款使用纯css3制作的图片分类过滤效果插件。该插件可以过滤出所有图片中的某一类图片。该图片分类过滤共有三种效果：图片模糊效果，图片缩小模糊效果和放大缩小效果。
css3图片过滤效果.zip
11-17
css3图片过滤效果.zip
基于CSS3实现图片模糊过滤效果
01-19
css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下...
CSS3 - filter(图像滤镜)
王佳斌
09-24 2532
前言 该函数为图片做一些视觉上的处理，fillter() 支持以下图像滤镜处理： 语法 描述 none 默认值，没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 brightness(%) 给图片应用一种线...
html 图片 滤镜,如何使用CSS实现图像滤镜效果？
weixin_29105429的博客
06-08 546
使用CSS filter属性，可以将类似Photoshop的滤镜效果应用于图像和内容；滤镜效果包括例如模糊效果，阴影，色彩变换和操作，如饱和/去饱和色等。该filter属性定义了元素(通常是)的可视效果，此属性主要用于图像内容。filter属性是将过滤器效果应用于web页面上的元素(主要是图像)的CSS方法。filter: none|blur()|brightness()|contrast()|d...
使用CSS过滤效果来改变图片样式
natalie86的专栏
03-13 2080
我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用<a target=_blank target="_blank" href="http://www.itdriver.cn/" style="color: rgb(16, 138, 198);">CSS来给web图像添加相同的效果。<p style="marg
CSS3 Filter的十种特效
10-15 392
Filters主要是运用在图片上，以实现一些特效，目前支持这个属性的浏览器少得可怜，现在只是webkit支持，而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持 grayscale灰度 ...
css3新特性：图片过滤器
CSYfairy的博客
06-16 245
css3新特性：图片过滤器 img{ -webkit-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ; } 可以使用多个过滤器，用空格分开 具体使用方法： 1）图片高斯模糊效果： img { -webkit-filter: blur(5px); /
浅谈CSS3 Filter的10种特效
遇见的博客
08-18 2359
必须要说明的是，这里的CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念，也不是我们所熟悉的IE滤镜，它是指通过CSS或SVG渲染元素概念可以描述的元素，包括它的子元素。 关于CSS3 Filter的具体解释您可以参考《Filter Effects 1.0》这篇文章。 接下来我们就开始探讨如何使用CSS3 Filter实现我们想要的效果。 首先，我们介绍
html怎么给图片加倒影,用CSS3实现图片倒影效果，同时给出兼容早期版本IE的方案...
05-26
在CSS3中，可以使用 `box-reflect` 属性来实现给图片加倒影的效果。不过，由于该属性不被早期版本的IE浏览器所支持，我们需要使用一些其他的方法来实现兼容性。 以下是使用CSS3实现图片倒影效果的代码： ```css img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5))); box-reflect: below 0px linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5)); } ``` 上述代码中，我们使用了 `-webkit-box-reflect` 和 `box-reflect` 属性来实现倒影效果。其中，`-webkit-box-reflect` 是针对WebKit浏览器的私有属性，而 `box-reflect` 则是标准属性。 如果要兼容早期版本的IE浏览器，则可以使用 `filter` 属性来实现倒影效果，具体代码如下： ```css img { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; filter: flipv; } ``` 上述代码中，我们使用了 `filter` 属性来实现倒影效果。其中，`-ms-filter` 是针对IE浏览器的私有属性，而 `filter` 则是标准属性。在IE浏览器中，我们使用了 `progid:DXImageTransform.Microsoft.BasicImage` 过滤器来实现镜像效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值