CSS – Utilisation d’images
Les images jouent un rôle important dans toute page Web. Bien qu’il ne soit pas recommandé d’inclure beaucoup d’images, il est toujours important d’utiliser de bonnes images partout où cela est nécessaire.
CSS joue un bon rôle pour contrôler l’affichage des images. Vous pouvez définir les propriétés d’image suivantes à l’aide de CSS.
-
Le frontière La propriété est utilisée pour définir la largeur d’une bordure d’image.
-
Le hauteur La propriété est utilisée pour définir la hauteur d’une image.
-
Le largeur La propriété est utilisée pour définir la largeur d’une image.
-
Le -moz-opacité La propriété est utilisée pour définir l’opacité d’une image.
La propriété de bordure d’image
Le frontière La propriété d’une image est utilisée pour définir la largeur d’une bordure d’image. Cette propriété peut avoir une valeur en longueur ou en %.
Une largeur de zéro pixel signifie qu’il n’y a pas de bordure.
Voici l’exemple –
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
</body>
</html>
Cela produira le résultat suivant –
La propriété Hauteur de l’image
Le hauteur La propriété d’une image est utilisée pour définir la hauteur d’une image. Cette propriété peut avoir une valeur en longueur ou en %. En donnant une valeur en %, il l’applique par rapport à la case dans laquelle une image est disponible.
Voici un exemple −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
</body>
</html>
Cela produira le résultat suivant –
La propriété Largeur de l’image
Le largeur La propriété d’une image est utilisée pour définir la largeur d’une image. Cette propriété peut avoir une valeur en longueur ou en %. En donnant une valeur en %, il l’applique par rapport à la case dans laquelle une image est disponible.
Voici un exemple −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "https://www.tutorialspoint.com/css/images/logo.png" />
</body>
</html>
Cela produira le résultat suivant –
La propriété -moz-opacity
Le -moz-opacité La propriété d’une image est utilisée pour définir l’opacité d’une image. Cette propriété est utilisée pour créer une image transparente dans Mozilla. Internet Explorer utilise filtre:alpha(opacité=x) pour créer des images transparentes.
Dans Mozilla (-moz-opacity:x) x peut être une valeur comprise entre 0,0 et 1,0. Une valeur inférieure rend l’élément plus transparent (il en va de même pour la syntaxe valide CSS3 opacity:x).
Dans IE (filter:alpha(opacity=x)) x peut être une valeur comprise entre 0 et 100. Une valeur inférieure rend l’élément plus transparent.
Voici un exemple −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "https://www.tutorialspoint.com/css/images/logo.png" />
</body>
</html>
Cela produira le résultat suivant –
#CSS #Utilisation #dimages