CSSの不透明度/透明度
プロパティは、要素のopacity
不透明度/透明度を指定します。
透明画像
opacity
プロパティは、0.0〜1.0の値を取ることができます。値が小さいほど、透明性が高くなります。
不透明度0.2
不透明度0.5
不透明度1
(デフォルト)
例
img {
opacity: 0.5;
}
透明なホバー効果
このプロパティは
、マウスオーバー時の不透明度を変更するためopacity
にセレクターと一緒に使用されることがよくあります。:hover
例
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
例の説明
最初のCSSブロックは、例1のコードに似ています。さらに、ユーザーが画像の1つにカーソルを合わせたときに何が起こるかを追加しました。この場合、ユーザーが画像にカーソルを合わせたときに画像が透明にならないようにする必要があります。このためのCSSはですopacity:1;
。
マウスポインタが画像から離れると、画像は再び透明になります。
逆ホバー効果の例:
例
img:hover {
opacity: 0.5;
}
透明ボックス
When using the opacity
property to add transparency to the background of an element, all of its child elements
inherit the same transparency. This can make the text inside a fully transparent element hard to read:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
opacity: 0.3;
}
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}
Text in Transparent Box
This is some text that is placed in the transparent box.
Example
<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;
}
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>
Example explained
First, we create a <div> element (class="background") with a background image, and a border.
Then we create another <div> (class="transbox") inside the first <div>.
The <div class="transbox"> have a background color, and a border - the div is transparent.
Inside the transparent <div>, we add some text inside a <p> element.