Comment utiliser les effets d'image définis ? (exemple de code)-tutoriel CSS-php.cn

Comment utiliser les effets d'image définis ? (exemple de code)

云罗郡主

Libérer： 2018-11-09 15:59:38

original

1702 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser les effets de définition d'image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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 néanmoins important d’utiliser de bonnes images chaque fois que cela est nécessaire.

CSS joue un grand rôle dans le contrôle de l'affichage des images. Vous pouvez définir les propriétés d'image suivantes à l'aide de CSS.

L'attribut border est utilisé pour définir la largeur de la bordure de l'image.

L'attribut height est utilisé pour définir la hauteur de l'image.

L'attribut width est utilisé pour définir la largeur de l'image.

L'attribut d'opacité -moz est utilisé pour définir l'opacité d'une image.

1. Attribut de bordure d'image

L'attribut de bordure de l'image est utilisé pour définir la largeur de la bordure de l'image. La longueur ou la valeur de cet attribut peut être %.

Une largeur de pixel nulle signifie aucune bordure, exemple :

<html>
   <head>
   </head>
   <body>
      <img  style = "border:0px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="Comment utiliser les effets d'image définis ? (exemple de code)" >
      <br />
      <img  style = "border:3px dashed red;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="Comment utiliser les effets d'image définis ? (exemple de code)" >
   </body>
</html>

Copier après la connexion

L'effet d'affichage est le suivant :

Comment utiliser les effets dimage définis ? (exemple de code)

2. Hauteur de l'image Attribut de réglage :

L'attribut width de l'image est utilisé pour définir la largeur de l'image. La longueur ou la valeur de cet attribut peut être %. Bien que la valeur soit exprimée en %, elle s'applique à la case dans laquelle l'image est disponible. Le cas est le suivant :

<html>
   <head>
   </head>
   <body>
      <img  style = "border:1px solid red; height:100px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="Comment utiliser les effets d'image définis ? (exemple de code)" >
      <br />
      <img  style = "border:1px solid red; height:50%;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="Comment utiliser les effets d'image définis ? (exemple de code)" >
   </body>
</html>

Copier après la connexion

Comment utiliser les effets dimage définis ? (exemple de code)

Attribut 3.moz-opacity

L'attribut -moz-opacity de l'image est utilisé pour définir le opacité de l'image. Cette propriété est utilisée pour créer des images transparentes dans Mozilla. IE utilise filter:alpha(opacity=x) pour créer des images transparentes. [Lecture recommandée : Comment obtenir la transparence et l'opacité des images en CSS]

Dans Mozilla (-moz-opacity : x) x peut être une valeur comprise entre 0,0 et 1,0. Des valeurs inférieures rendent l'élément plus transparent (la syntaxe CSS3 valide pour l'opacité est la même : x).

Dans IE (filtre : alpha(opacity=x)) x peut être une valeur comprise entre 0 et 100. Des valeurs inférieures rendent l'élément plus transparent. Le code est le suivant :

<html>
   <head>
   </head>
   <body>
      <img  style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="Comment utiliser les effets d'image définis ? (exemple de code)" >
   </body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment utiliser les effets dimage définis ? (exemple de code)

Ce qui précède est une introduction complète à la façon d'utiliser le définition de l'effet d'image, si vous voulez en savoir plus. Pour plus d'informations sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

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!