zoukankan      html  css  js  c++  java
  • filter滤镜效果(css3属性)

    <!DOCTYPE html>
    <html>
        <head>
        <style>
        img {
            width: 33%;
            height: auto;
            float: left; 
        }
        .blur {-webkit-filter: blur(4px);filter: blur(4px);}
        .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
        .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
        .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
        .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
        .invert {-webkit-filter: invert(100%);filter: invert(100%);}
        .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
        .saturate {-webkit-filter: saturate(7); filter: saturate(7);}
        .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
        .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
        </style>
        </head>
    <body>
        <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p>
    
        <img src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="blur" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="brightness" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="contrast" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="grayscale" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="huerotate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="invert" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="opacity" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="saturate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="sepia" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
        <img class="shadow" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">
    
    </body>
    </html>

    wc3 链接  http://www.runoob.com/cssref/css3-pr-filter.html

  • 相关阅读:
    PIE-Basic 频率域滤波
    使用CefSharp前端后台交换
    CefSharp F12打开DevTools查看console js和c#方法互相调用
    js和C#互相调用
    C# 矢量图EMF 总结
    key
    关于IdentityServer4不使用MVC页面进行登录(跨域发送验证请求)的一些问题(前后端分离的验证)
    C#版的省份编码字典
    EFCore显示加载模式下,自动包含导航属性(只包含第一层的导航属性)的方法
    EFCore批量实现全局查询筛选器
  • 原文地址:https://www.cnblogs.com/520BigBear/p/9929506.html
Copyright © 2011-2022 走看看