Maison > Article > interface Web > Comment définir la transparence de l'image html img

Comment définir la transparence de l'image html img

青灯夜游original: 2021-02-22 12:04:589693parcourir

Comment définir la transparence de l'image img html : 1. Définissez le style "opacity:value;" pour l'image img, et la valeur est comprise entre 0,0 (complètement transparente) et 1,0 (complètement opaque) ; 2. Pour l'image img, définissez le style "filter:opacity(%);"

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Réglage de la transparence de l'image HTML img

Méthode 1 : Utiliser l'opacité pour définir la transparence de l'image

La propriété Opacité définit le niveau de transparence d'un élément.

Syntaxe :

opacity: value;

Valeur de l'attribut :

valeur : Spécifiez l'opacité. De 0.0 (entièrement transparent) à 1.0 (entièrement opaque) >

Tutoriel vidéo CSS

, "
Tutoriel vidéo html

Méthode 2 : Utiliser filter:opacity( %)

Comment définir la transparence de limage html img

L'attribut filter définit l'effet visuel (par exemple : flou et saturation) de l'élément (généralement Comment définir la transparence de l'image html img

opacité(%) : Convertit la transparence de l'image. La valeur définit l'échelle de la conversion. Une valeur de 0 % signifie une transparence totale, une valeur de 100 % signifie aucune modification de l'image. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet, équivalents à multiplier le nombre d'échantillons d'image. Si la valeur n'est pas définie, la valeur par défaut est 1. Cette fonction est très similaire à l'attribut d'opacité existant, sauf que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour améliorer les performances. Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img2{
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="demo/img/5.jpg"    style="max-width:90%"/ alt="Comment définir la transparence de l'image html img" >
		</div>
		<div>
			<p>设置透明度的图：</p>
		　　<img  class="img2" src="demo/img/5.jpg"    style="max-width:90%"/ alt="Comment définir la transparence de l'image html img" >
		</div>
	</body>
</html>

Rendu :

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à Programmation

! !

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!

html5 css css3 html Filter

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：Comment mettre du texte sur la surface de l'image en HTMLArticle suivant：Comment mettre du texte sur la surface de l'image en HTML

Articles Liés

Voir plus