CSS 画像の 不透明度 / 透明度

❮ 前章へ 次章へ ❯

CSS で透明な画像を作成するのは簡単です。

CSS の opacity プロパティは、CSS3 勧告の一部です。

例 1 - 透明な画像の作成

透明に対する CSS3 プロパティは opacity です。

先ず、CSS による透明画像の作成方法を示します。

通常の画像:

klematis

透明度をもつ同じ画像:

klematis

次のCSSを見てください:

例

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
Try it Yourself ❯

opacity プロパティは、0.0 - 1.0の値をとることができます。数値が小さくなるほど、要素はより透明になります。

IE8 以前は、filter:alpha(opacity=x) を使用します。 x は、0 - 100の値をとることができます。数値が小さくなるほど、要素はより透明になります。

例 2 - 画像透明度 - ホバー効果

画像の上のマウスを乗せてください:

klematis klematis

CSS は以下の通りです:

例

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
Try it Yourself ❯

CSS の最初のブロックは、例 1のコードと同じです。 それに、ユーザが画像の一つにカーソルを乗せた場合、どうするかを追加しています。 このケースでは、ユーザがその画像にマウスを乗せた時には、画像が不透明になるようにしました。 この CSS は、opacity:1; です。

マウスポインタが画像から離れた時は、再び画像を透明にします。

例 3 - 透明ボックス内のテキスト

This is some text that is placed in the transparent box.


ソースコードは以下の通り:

例

<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>
Try it Yourself ❯

最初に、背景画像とボーダーを持つ <div> 要素（class="background"）を作成します。 次に、最初の <div> の中に別な <div>（class="transbox"）を作成します。 <div class="transbox"> は、背景色とボーダーを持っています - div は透明です。 透明な div の内部の p 要素内にテキストを追加します。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯


❮ 前章へ 次章へ ❯