CSS - Utilisation d'images
Les images jouent un rôle important dans n'importe quelle page Web. Bien qu'il ne soit pas recommandé d'inclure beaucoup d'images, il est néanmoins important d'utiliser de bonnes images chaque fois que 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 border La propriété est utilisée pour définir la largeur d'une bordure d'image.
le height La propriété est utilisée pour définir la hauteur d'une image.
le width La propriété est utilisée pour définir la largeur d'une image.
le -moz-opacity La propriété est utilisée pour définir l'opacité d'une image.
La propriété de bordure d'image
La propriété border 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 pas de bordure.
Voici l'exemple -
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>Il produira le résultat suivant -
La propriété Hauteur de l'image
La propriété height 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 = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>Il produira le résultat suivant -
La propriété de largeur d'image
La propriété width 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 = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>Il produira le résultat suivant -
La propriété -moz-opacity
La propriété -moz-opacity 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. IE utilisefilter:alpha(opacity=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 l'opacité de syntaxe CSS3 valide: 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 = "/css/images/logo.png" />
</body>
</html>Il produira le résultat suivant -