CSS画像透明/不透明
CSSを使って透明な画像を簡単に作成できます。
注 : CSS Opacity プロパティは、W3C の CSS3 推奨事項の一部です。
例1 - 透明な画像を作成する
CSS3の透明度プロパティはopacityです。
まず、CSSで透明な画像を作成する方法を説明します。
通常の画像
透明度のある同じ画像:
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>プログラムを実行して確認してください
以下の CSS を見てください
オパ: 0.4 ;
filter:alpha(opacity=40); /* IE8 以前の場合 */
}
IE8 以前のバージョンではフィルター: alpha (opacity=x) を使用します。 x が取り得る値は 0 ～ 100 です。値を低くすると、要素の透明度が高くなります。
例 2 - 画像の透明度 - ホバー効果例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
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 */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>CSS スタイル: filter:alpha(opacity=40); /* IE8 以前の場合*/
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 以前の場合 */
}
最初の CSS ブロックは例 1 のコードに似ています。さらに、ユーザーがいずれかの画像の上にマウスを移動したときに何が起こるかを追加しました。この場合、ユーザーが画像の上にマウスを置いたときに画像が鮮明になるようにします。
この CSS は次のとおりです: opacity=1.
IE8 以前の使用: filter:alpha(opacity=100).
マウス ポインターが画像から離れると、画像は透明度を取り戻します。
例 3 - 透明なボックス内のテキスト
テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。テキストは透明なボックス内にあります。
ソースコードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #fcffe0;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
</p>
</div>
</div>
</body>
</html>プログラムを実行して試してください
