Css-images
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>それは次の結果を生成します-
