JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSで画像のスタイルを設定するにはどうすればよいですか？

CSSで画像のスタイルを設定するには、width（幅）や height（高さ）、opacity（透明度）といった各種プロパティを使用します。本記事では、その中でも代表的な「画像の透明度の設定」に焦点を当てて解説します。

旧来の方法：-moz-opacity プロパティ

かつてMozilla Firefoxでは、画像の不透明度を指定するために -moz-opacity という独自プロパティが使用されていました。一方、Internet Explorerでは filter:alpha(opacity=x) を使うことで同様の透明画像を実現していました。

現在の推奨方法：opacity プロパティ

-moz-opacity は現在すでに非推奨となっており、代わりにすべてのモダンブラウザで標準サポートされている opacity プロパティを使用するのがベストプラクティスです。opacity の値は 0.0（完全に透明）〜 1.0（完全に不透明） の範囲で指定します。

コード例

以下は、CSSで画像に枠線を付け、透明度を設定したサンプルコードです。

<html>
<head>
</head>
<body>
   <img style = "border:1px solid red;opacity:0.5;"
      src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
</body>
</html>

この例では、画像に赤い1pxの枠線を追加し、opacity:0.5 によって半透明に表示しています。値を小さくするほど画像はより透過されます。

また、古いブラウザへの対応が必要な場合は、以下のようにベンダープレフィックス付きのプロパティを併記することも可能でした。

img {
   opacity: 0.5;              /* 標準 */
   -moz-opacity: 0.5;         /* 旧Firefox向け（非推奨） */
   filter: alpha(opacity=50); /* 旧IE向け（非推奨） */
}

現在では主要ブラウザがすべて opacity に対応しているため、特別な理由がない限り標準プロパティのみを使用すれば問題ありません。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"