CSS-画像の使用

画像はどのWebページでも重要な役割を果たします。多くの画像を含めることはお勧めできませんが、必要な場所で適切な画像を使用することが依然として重要です。

CSSは画像の表示を制御するのに良い役割を果たします。 CSSを使用して、次の画像プロパティを設定できます。

border プロパティは、画像の境界線の幅を設定するために使用されます。
height プロパティは、画像の高さを設定するために使用されます。
width プロパティは、画像の幅を設定するために使用されます。
-moz-opacity プロパティは、画像の不透明度を設定するために使用されます。

画像境界線プロパティ

画像の_border_プロパティは、画像の境界線の幅を設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。

幅がゼロピクセルの場合、境界線はありません。

ここに例があります-

<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>

それは次の結果を生成します-

画像の高さプロパティ

画像の_height_プロパティは、画像の高さを設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。％で値を指定する一方で、画像が利用可能なボックスに関してそれを適用します。

ここに例があります-

<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>

それは次の結果を生成します-

画像の幅プロパティ

画像の_width_プロパティは、画像の幅を設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。％で値を指定する一方で、画像が利用可能なボックスに関してそれを適用します。

ここに例があります-

<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>

それは次の結果を生成します-

-moz-opacityプロパティ

画像の_-moz-opacity_プロパティは、画像の不透明度を設定するために使用されます。このプロパティは、Mozillaで透明な画像を作成するために使用されます。 IEは* filter：alpha（opacity = x）*を使用して透明な画像を作成します。

Mozilla（-moz-opacity：x）では、xは0.0〜1.0の値になります。値を小さくすると、要素がより透明になります（CSS3で有効な構文opacity：xについても同じことが言えます）。

IEでは（filter：alpha（opacity = x））xは0〜100の値になります。値を小さくすると、要素がより透明になります。

ここに例があります-

<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>

それは次の結果を生成します-

Css-images

CSS-画像の使用

画像境界線プロパティ

画像の高さプロパティ

画像の幅プロパティ

-moz-opacityプロパティ

目次