Comment rendre les images plus lumineuses en HTML-Questions et réponses frontales-php.cn

Comment rendre les images plus lumineuses en HTML

青灯夜游

Libérer： 2021-06-08 15:31:56

original

4639 Les gens l'ont consulté

En HTML, vous pouvez utiliser l'attribut filter pour rendre l'image plus lumineuse. Il vous suffit d'ajouter le style "filter:brightness(% value)" à l'élément image. L'attribut filter définit la fonction luminosité() pour ajuster la luminosité de l'image. Lorsque la valeur de cette fonction dépasse "100%", l'image sera plus lumineuse.

Comment rendre les images plus lumineuses en HTML

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

En HTML, vous pouvez éclaircir les images grâce à l'attribut filtre. Utilisons un exemple pour comprendre la méthode de mise en œuvre :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.img1 {
				-webkit-filter: brightness(50%);
				/* Chrome, Safari, Opera */
				filter: brightness(50%);
			}
			.img2 {
				-webkit-filter: brightness(120%);
				/* Chrome, Safari, Opera */
				filter: brightness(120%);
			}
		</style>
	</head>

	<body>
		<p>原图:</p>
		<img src="img/1.jpg" alt="Pineapple" width="300">
		<p>filter属性控制图片的亮度:</p>

		<img class="img1" src="img/1.jpg" alt="Pineapple" width="300">
		<img class="img2" src="img/1.jpg" alt="Pineapple" width="300">


	</body>

</html>

Copier après la connexion

Rendu :

Comment rendre les images plus lumineuses en HTML

Instructions :

L'attribut filter définit l'effet visuel de l'élément (par exemple : flou et saturation).

La fonction luminosité (%) ajuste la luminosité de l'image, en appliquant une multiplication linéaire à l'image pour la rendre plus claire ou plus sombre. Si la valeur est 0%, l'image sera complètement noire. Si la valeur est de 100 %, il n'y aura aucun changement dans l'image. D'autres valeurs correspondent à des effets multiplicateurs linéaires. Les valeurs supérieures à 100 % sont acceptables et l'image sera plus lumineuse qu'avant. Si aucune valeur n'est définie, la valeur par défaut est 1.

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

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!