zoukankan      html  css  js  c++  java
  • CSS滤镜效果

    这是一篇涉及CSS滤镜效果的

     

    filter: contrast(): 调整图像的对比度。

    filter: blur(): 给图像设置高斯模糊效果。

    <style type="text/css">
    
       img{
        float: left;
       }
       #img2 {
        filter: blur(5px);
       }
       #img3 {
        filter: opacity(.8);
       }
       #img4 {
        filter: brightness(1.5);
       }
       #img5 {
        filter: contrast(110%);
       }
       #img6{
        filter: blur(10px) brightness(80%) opacity(.8);
       }
      </style>

     

    <body>
      <div id="img1">
       <img src="img/img_11-01.jpg"/>
      </div>
      <div id="img2">
       <img src="img/img_11-01.jpg"/>
     
      </div>
      <div id="img3">
       <img src="img/img_11-01.jpg"/>
     
      </div>
      <div id="img4">
       <img src="img/img_11-01.jpg"/>
     
      </div>
      <div id="img5">
       <img src="img/img_11-01.jpg"/>
     
      </div>
      <div id="img6">
       <img src="img/img_11-01.jpg"/>
     
      </div>
     </body>

    原图如下:

    以下为效果图:

  • 相关阅读:
    Linux下截图工具
    Vue学习——router路由的实现原理
    Vue学习——vue的双向数据绑定原理
    JavaScript学习——面向对象(一)——创建对象(工厂模式和构造器模式)
    子组件给父组件的传值
    Vue组件
    JavaScript学习——事件对象Event
    JavaScript学习——事件处理程序
    JavaScript技巧——轮播图
    javascript——let关键字
  • 原文地址:https://www.cnblogs.com/shengnan-2017/p/7670362.html
Copyright © 2011-2022 走看看