Comment rendre les images plus lumineuses avec CSS-tutoriel CSS-php.cn

Comment rendre les images plus lumineuses avec CSS

WBOY

Libérer： 2021-11-30 18:29:35

original

6609 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut filtre et la fonction luminosité() pour rendre l'image plus lumineuse. L'attribut filtre est utilisé pour définir l'effet visuel de l'élément d'image. Utilisez-le avec luminosité() pour ajuster la luminosité de l'image. image. La syntaxe est "élément d'image {filtre : luminosité (valeur de luminosité);}".

Comment rendre les images plus lumineuses avec CSS

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

Comment éclaircir les images avec CSS

Vous pouvez éclaircir les images via l'attribut filter. L'attribut filter définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement Comment rendre les images plus lumineuses avec CSS ) ).

Lorsque la valeur de l'attribut est la luminosité, appliquez 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.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
.img1 {
    filter: brightness(200%);
}
    </style>
  <img  src="1118.02.png" class="img1" alt="Comment rendre les images plus lumineuses avec CSS" >
  <img  src="1118.02.png" class="img2" alt="Comment rendre les images plus lumineuses avec CSS" >
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment rendre les images plus lumineuses avec CSS