CSS畫像の透明/不透明
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>プログラムを?qū)g行して確認(rèn)してください
以下の 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 - 透明なボックス內(nèi)のテキスト
テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。テキストは透明なボックス內(nèi)にあります。
ソースコードは次のとおりです:
<!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>人生就像一張紙，行走間，如素箋染墨。每一次經(jīng)歷都是一筆濃墨或淡彩;每一次成功或挫折，每一次心跳都是一個不同凡響的音符，淡然或張狂，如那枝上的鳥兒，可以自由戀愛，傾心歡唱，即使這素淡的冬日，也有余韻繞梁……
</p>
</div>
</div>
</body>
</html>プログラムを?qū)g行して試してください
