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

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%);   
}

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>

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>

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);   
}

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;   
}

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);   
}

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); //阴影

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!