Maison > interface Web > tutoriel HTML > le corps du texte

Css3 filter(滤镜)_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:31:46
original
1043 Les gens l'ont consulté

2015-12-20  17:05:13

  • css3的filter滤镜效果。。。。
  • css3的filter滤镜效果,filter是W3C CSS filter Effect 1.0中定义的滤镜效果,一个使用CSS来改变图片的模糊度、亮度、对比度、饱和度等等效果的过滤器。

    index.html中的代码如下:

    <br />style.css中样式设置为:
    Copier après la connexion

    其中,background-attachment属性用于定义背景图片随滚动轴的移动方式,取值: scroll | fixed | inherit:

  • scroll: 随着页面的滚动轴背景图片将移动;
  • fixed: 随着页面的滚动轴背景图片不会移动;
  • inherit:继承父类的属性设置;
  • 下面就要正式进入filter滤镜效果的展示:

    (1)filter:blur(模糊度)

    在style.css文件中加入filter属性:

    blur(模糊度),数值越大,图片会变得越模糊,效果如下图所示:

                        原图                                             效果图

    (2)filter:brightness(亮度)

    brightness值从(-1~1),值越大亮度越大,效果对比如下:

                      原图                                            效果图

    (3)filter:saturate(饱和度)

    饱和度以100%作为中间值,饱和度大于100%,饱和度小于100%,效果图如下:

                      饱和度为30%                                        饱和度为150%

    (4)filter:sepia(怀旧)

    filter:sepia(100%);参数范围(0%~100%)效果对比如下:

                      原图                                           效果图

    (5)filter:grayscale(灰度)

    filter:grayscale(50%); (参数范围0%~100%),效果对比如下;

                        原图                                           效果图

    (6)filter:invert(反相)

    filter:invert(80%);参数设置范围(0%~100%),效果图如下:

                    原图                                              效果图

    (7)filter:hue-rotate(色相)

    取值范围为0度到360度,效果如下:

                      原图                                            效果图

    (8)filter:contrast(对比度),100%为中间取值

    效果如下:

                          原图                                                  效果图<br />至此,filter所有的参数效果已经介绍完毕,希望对大家有所帮助。
    Copier après la connexion

    Copier après la connexion

     

     

     

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal