zoukankan      html  css  js  c++  java
  • css3属性之filter初探

    filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性;

    img {
      -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
      filter: grayscale(100%);
    }
    

      这段代码可以让图片编程黑白,grayscale: 灰度,灰度模式;

      

    img {
        -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
        filter: brightness(200%);
    }
    

      这段代码可以让图片亮度变亮, 配合css的渐变transition属性可以实现滑过逐渐变亮的动画效果。brightness 是bright的名词形式;意为亮度!

    img {
        -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
        filter: contrast(200%);
    }
    

      这段代码可以让图片对比度提高;contrast : 意为对比,反差

    盒子的阴影效果可以用box-shadow实现 ;文字的阴影效果可以用text-shadow实现;那图片的呢?给图片增加如下属性可以使得图片出现阴影效果;

    img {
        -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
        filter: drop-shadow(8px 8px 10px red);
    }
    

      常用的filter属性opacity可以改变图片的透明度

    img {
        -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
        filter: opacity(30%); /*百分号或者小数.3*/
    }
    

      

  • 相关阅读:
    ecshop后台新建一个模块,添加分页
    Mysql中设置远程访问的方法
    Thinkphp 3.2中文章详情页的上一篇 下一篇文章功能
    Thinkphp 3.2.2 利用phpexcel完成excel导出功能
    Thinkphp 3.2中字符串截取
    服务管理-文件服务器
    nginx-伤心的事
    shell-awk
    shell-sed
    shell-函数、数组、正则
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/6679034.html
Copyright © 2011-2022 走看看