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

Utilisez CSS3 pour écrire des filtres en niveaux de gris afin de créer des effets photo en noir et blanc

不言
Libérer: 2018-06-25 17:17:29
original
2661 Les gens l'ont consulté

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 :
201659103649279.jpg (766×383)

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%); }
Copier après la connexion

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%);   
}
Copier après la connexion
C'est facile de l'utiliser sur une certaine image, il suffit d'ajouter une classe :

<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>
Copier après la connexion
C'est tout. ## Ajouter un effet de filtre SVG Cette fonctionnalité n'est actuellement disponible que dans Chrome 18+, et d'autres navigateurs ajouteront bientôt la prise en charge. Pour obtenir le même effet dans Firefox 4+, nous devrons peut-être utiliser des filtres SVG. J'ai créé un nouveau fichier saturate.svg séparé avec le code suivant :

<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>
Copier après la connexion
Ne vous laissez pas intimider par ce code SVG - bien que la séquence matricielle ci-dessus soit un peu compliquée. Je vous recommande de copier et coller ce code directement dans un "petit fichier" commun. J'écrirai un autre article pour présenter en détail les changements matriciels ci-dessus, je n'entrerai donc pas dans les détails ici. Avec la référence de fichier SVG ci-dessus, le code CSS que nous souhaitons insérer dans la page HTML est le suivant :


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);   
}
Copier après la connexion

Pour être compatible avec IE :

Jusqu'à présent, notre code est compatible avec les futurs navigateurs et les dernières versions de Chrome et Firefox 4+. Afin d'ajouter IE 6-9 à la liste de compatibilité, nous devons utiliser le filtre maladroit mais efficace de Microsoft :

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;   
}
Copier après la connexion
Si vous souhaitez toujours rendre compatible l'ancienne version du navigateur du noyau Webkit :

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);   
}
Copier après la connexion
Si vous souhaitez obtenir cet effet visuel dans tous les navigateurs (en supposant que vos visiteurs prennent en charge JavaScript), vous pouvez utiliser jQuery ou Greyscale.js pour modifier votre image afin de la décolorer.


Le code CSS que nous avons écrit ci-dessus nous permet de transformer l'image en noir et blanc sans utiliser PhotoShop. Utiliser CSS pour implémenter cette fonctionnalité peut être très simple à modifier : par exemple, vous pouvez voir que lorsque l'on change le paramètre de décoloration de 100% à 50%, l'image aura l'effet d'un mélange de couleurs primaires et de noir et blanc.

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); //阴影
Copier après la connexion
Ce qui précède est le contenu de cet article Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !


Recommandations associées :

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!

É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