セット画像効果を使用するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

セット画像効果を使用するにはどうすればよいですか? (コード例)

云罗郡主

Nov 09, 2018 pm 03:59 PM

この記事の内容は画像エフェクトの設定方法についてです。必要な方は参考にしていただければ幸いです。

画像はどの Web ページでも重要な役割を果たします。大量の画像を含めることはお勧めできませんが、必要に応じて適切な画像を使用することが重要です。

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

border 属性は、画像の境界線の幅を設定するために使用されます。

height 属性は、画像の高さを設定するために使用されます。

width 属性は、画像の幅を設定するために使用されます。

-moz opacity プロパティは、画像の不透明度を設定するために使用されます。

1. 画像の境界線属性

画像の境界線属性は、画像の境界線の幅を設定するために使用されます。この属性の長さまたは値は % です。

ゼロピクセル幅は境界線がないことを意味します。例:

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png?x-oss-process=image/resize,p_40"  class="lazy"  style = "border:0px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="セット画像効果を使用するにはどうすればよいですか? (コード例)" >
      <br />
      <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png?x-oss-process=image/resize,p_40"  class="lazy"  style = "border:3px dashed red;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="セット画像効果を使用するにはどうすればよいですか? (コード例)" >
   </body>
</html>

表示効果は次のとおりです:

セット画像効果を使用するにはどうすればよいですか? (コード例)

2. 画像の高さ設定属性。 :

画像の幅属性は、画像の幅を設定するために使用されます。この属性の長さまたは値は % です。値は%で表されますが、画像が使用可能なボックスに適用されます。ケースは次のとおりです。

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png?x-oss-process=image/resize,p_40"  class="lazy"  style = "border:1px solid red; height:100px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="セット画像効果を使用するにはどうすればよいですか? (コード例)" >
      <br />
      <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png?x-oss-process=image/resize,p_40"  class="lazy"  style = "border:1px solid red; height:50%;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="セット画像効果を使用するにはどうすればよいですか? (コード例)" >
   </body>
</html>

セット画像効果を使用するにはどうすればよいですか? (コード例)

3.moz-opacity 属性

画像の -moz-opacity 属性は、画像の不透明度を設定するために使用されます。画像。このプロパティは、Mozilla で透明なイメージを作成するために使用されます。 IE では、filter:alpha(opacity=x) を使用して透明な画像を作成します。 [推奨読書: css で画像の透明度と不透明度を実現する方法 ]

Mozilla では (-moz-opacity: x) x には 0.0 ～ 1.0 の値を指定できます。値が低いほど、要素の透明度が高くなります (CSS3 の不透明度の有効な構文は同じです: x)。

IE (フィルター: alpha(opacity = x)) では、x には 0 ～ 100 の値を指定できます。値を低くすると、要素の透明度が高くなります。コードは次のとおりです。

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/369/557/389/1541750120148707.png?x-oss-process=image/resize,p_40"  class="lazy"  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="セット画像効果を使用するにはどうすればよいですか? (コード例)" >
   </body>
</html>

効果は次のとおりです。

セット画像効果を使用するにはどうすればよいですか? (コード例)