コーススケジュール
方法: 1. 要素に「background-color: rgba(R, G, B, A)」スタイルを追加して色の透明度を設定します; 2. 要素に「opacity: transparent value;」を追加します;透明度を設定するスタイル; 3.画像に「filter:opacity(%);」スタイルを設定して透明度を設定します。
CSS で透明度を設定するには 3 つの方法があります。
-
rgba() -
opacity -
filter:opacity(%)
rgba()
rgba() 関数は色の透明度を設定できます。構文は次のとおりです。
RGBA(R,G,B,A)
value：
-
R: 赤の値。 正の整数 | パーセンテージ
-
G: 緑色の値。 正の整数 | パーセンテージ
-
B: 青色の値。 正の整数 | パーセンテージ
-
A: アルファ透明度。 値は 0 ～ 1 です。
例: rgba(255,0,0,0.5)半透明の赤
rgba() は色の透明度を簡単に設定できるため、ページのレイアウトに多くの用途があります。 例: 背景は透明に見えますが、その上のテキストは不透明になります。
示例：
background-color:rgba(0,152,50,0.7);// -->70% の不透明度 background-color:transparent;完全な透明性がサポートされています
opacity
CSS3 では、要素の透明度を設定するために使用できる opacity 属性が追加されています。 opacity 属性が継承され、コンテナ内のすべての要素が透明になります。
構文:
opacity: value ;
-
value : 不透明度を 0.0 (完全に透明) ～ 1.0 (完全に不透明) で指定します。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opactity</title>
<style>
.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
透明度の効果を設定する
.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
z-index:10;
opacity:0.5;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
z-index:5;
opacity:0.5;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
opacity:0.5;
}
パフォーマンス効果:
filter:opacity(%)
filter 属性は、Web ページ上の要素 (主に画像) にフィルタ効果を適用するための CSS メソッドです。画像の不透明効果は、opacity() 値を設定することで設定できます。 不透明度 0% は要素が完全に透明であることを意味し、不透明度 100% は元の画像を意味します。
構文:
filter: opacity(%);
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.opacity1 {
opacity: 0.5;
filter: none;
}
.opacity2 {
opacity: 0.2;
filter: none;
}
</style>
</head>
<body>
<div>
正常图片:<br /><br />
<img src="1.jpg" width="300px" /></div><br />
<div>
设置透明度的图片：<br /><br />
<img class="opacity1" src="1.jpg" width="300px" />
<img class="opacity2" src="1.jpg" width="300px" />
</div>
</body>
</html>
レンダリング:
