Maison > Article > interface Web > Comment obtenir un effet de filtre d'image en CSS3 ? Implémentation de l'attribut de filtre (image détaillée et explication textuelle)

Comment obtenir un effet de filtre d'image en CSS3 ? Implémentation de l'attribut de filtre (image détaillée et explication textuelle)

青灯夜游original: 2018-10-18 10:58:048555parcourir

Comment obtenir un effet de filtre d'image en CSS3 ? En fait, il est très simple d'utiliser l'attribut filtre css3 pour obtenir plusieurs effets de filtre. Cet article vous présentera quels effets de filtre peuvent être obtenus par l'attribut de filtre CSS3 et comment implémenter ces effets de filtre d'image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, créons une démo. Le code est le suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3 filter滤镜</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)" / alt="Comment obtenir un effet de filtre d'image en CSS3 ? Implémentation de l'attribut de filtre (image détaillée et explication textuelle)" >
		</div>
	</body>
</html>

L'effet est comme ceci (sans ajouter d'effet de filtre) :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

Jetons un coup d'œil aux effets de filtre d'image que l'attribut de filtre CSS3 peut obtenir :

1. Effet de filtre de flou d'image CSS3

Ajoutez simplement le code CSS suivant :

.demo img{
filter: blur(2px);/* 给图像设置高斯模糊，值越大越模糊 */
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

Compte tenu de la compatibilité du navigateur, nous pouvons ajouter une déclaration :

.demo img{
-webkit-filter: blur(2px); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: blur(2px);/* 给图像设置高斯模糊 */
}

2. filtre css3 --- luminosité (%) définit la luminosité de l'image

.demo img{
-webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；值是100%以上，则图像更亮*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

.demo img{
   -webkit-filter: brightness(150%);
   filter: brightness(150%);
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

3. filtre css3 ---contraste (%) Définir le contraste de l'image

.demo img{
    -webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(50%);
    /* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

.demo img{
    -webkit-filter: contrast(150%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(150%);
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

4. filtre css3 ---drop-shadow() définit l'ombre de l'image

.demo img{
     -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
     filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
     /* 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

Description :

filter:drop-shadow(h-shadow v-shadow blur spread color);

h-shadow : Définir le décalage horizontal de l'ombre. Les valeurs négatives feront apparaître l'ombre sur le côté gauche de l'élément.

v-shadow : Définit le décalage vertical de l'ombre. Les valeurs négatives feront apparaître l'ombre au-dessus de l'élément.

flou : définissez le flou. Plus la valeur est grande, plus elle est floue et l'ombre deviendra plus grande et plus claire. Les valeurs négatives ne sont pas autorisées. Si elle n'est pas définie, la valeur par défaut est 0 (la limite. de l'ombre est très nette).

étalement : les valeurs positives agrandiront l'ombre et la rendront plus grande, les valeurs négatives feront rétrécir l'ombre si elle n'est pas définie, la valeur par défaut est 0 (l'ombre aura la même taille que l'élément ; ). Remarque : Webkit et certains autres navigateurs ne prennent pas en charge la propagation et ne s'afficheront pas s'ils sont ajoutés.

couleur : définissez la couleur de l'ombre ; si elle n'est pas définie, la valeur de la couleur est basée sur le navigateur.

5. filtre css3 --- niveaux de gris (%) définit l'échelle de gris de l'image

.demo img{
   -webkit-filter: grayscale(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: grayscale(100%);
   /* 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

6. filtre css3 --- hue-rotate(deg) définit la rotation de la teinte de l'image

.demo img{
   -webkit-filter: hue-rotate(90deg); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: hue-rotate(90deg);
   /* 给图像应用色相旋转，值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

7. filtre css3 --- inverser (%) pour définir la couleur inverse de l'image

.demo img{
   -webkit-filter: invert(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: invert(100%);
   /* 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。*/
}

Rendu :

Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

8. filtre css3 --- opacité (%) définir la transparence de l'image

.demo img{
   -webkit-filter: opacity(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: opacity(50%);
   /* 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。 */
}

Rendu :

1Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

9. filtre css3 ---saturate(%) pour définir la saturation

.demo img{
   -webkit-filter: saturate(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: saturate(50%);
   /* 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。*/
}

Rendu :

1Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

10. filtre CSS3 --- sépia (%) définit l'image en marron (une sensation de vieille photo rétro)

.demo img{
   -webkit-filter: sepia(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
   filter: sepia50%);
   /* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。 */
}

Rendu :

1Comment obtenir un effet de filtre dimage en CSS3 ? Implémentation de lattribut de filtre (image détaillée et explication textuelle)

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

didacticiel vidéo de base CSS , le didacticiel vidéo CSS3 , didacticiel vidéo bootstrap !

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!

Déclaration：

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

Article précédent：Quelles sont les principales unités de longueur absolue CSS ? Comment convertir entre unités de longueur absolue ?Article suivant：Quelles sont les principales unités de longueur absolue CSS ? Comment convertir entre unités de longueur absolue ?

Articles Liés

Voir plus