Cet article présente principalement la méthode d'utilisation de CSS3 pour écrire des filtres en niveaux de gris afin de créer des effets photo en noir et blanc. Le filtre en CSS3 est très puissant. L'article présente également la méthode compatible avec IE. Les amis qui en ont besoin peuvent s'y référer. à cela
La fonction de filtre en CSS3 nous permet de traiter les images facilement et commodément sans utiliser PhotoShop ou beaucoup de codes JavaScript et PHP. Cette propriété est déjà prise en charge par les nouveaux navigateurs Firefox, Safari et Chrome, et nous pouvons simuler cet effet grâce à des technologies alternatives complètes, même les navigateurs IE.
Dans cet article, nous utiliserons l'image de test standard Lena Söderberg (Note du traducteur : la belle photo de Lena est utilisée comme image de test standard pour la compression d'image) comme démonstration et utiliserons CSS pour la convertir en une image noire et image blanche. Ci-dessous, j'expliquerai comment utiliser cette fonctionnalité de CSS pour ajuster la teinte, le flou, la luminosité, le contraste et certains autres effets. Rendu :
Filtre d'échelle de gris CSS3
Utiliser CSS3 pour diluer la couleur d'une image ne pourrait pas être plus simple. Nous pouvons écrire cette instruction CSS sous forme de classe, de sorte que lorsque nous rencontrons une image avec l'effet souhaité, nous puissions directement ajouter une classe.
img.desaturate { filter: grayscale(100%); }
Bien sûr, lorsque les navigateurs actuels utilisent CSS3, ils doivent ajouter leurs propres préfixes expérimentaux pour les fonctions du navigateur. Par conséquent, la première chose que nous devons faire est d'écrire le préfixe du navigateur :
<. 🎜>img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="greyscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); }
Pour être compatible avec IE :
img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; }
img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); }
Autres effets :
De plus, d'autres effets de filtre peuvent être ajoutés aux photos en noir et blanc :-webkit-filter:blur(5px); //模糊,此处为5像素 -webkit-filter:sepia(0.5); //叠加褐色,取值范围0-1,此处表示50%的褐色 -webkit-filter:brightness(0.5); //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片) -webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜 -webkit-filter:invert(1); //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色 -webkit-filter:saturate(4); //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大 -webkit-filter:contrast(2); //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大 -webkit-filter:opacity(0.8); //透明度,取值范围0~1,0为全透明,1为原图 -webkit-filter:drop-shadow(17px 17px 20px black); //阴影
CSS pour obtenir un effet de menu de boutons horizontal en trois dimensions
Comment utiliser CSS3 Réalisez l'effet flip book 3D
Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!