ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で背景の透明性を実現する 3 つの方法
CSS で背景の透明性を実現する 3 つの方法
- 王林転載
- 2020-06-10 09:17:115002ブラウズ
CSS で背景の透明度を実現するには通常 3 つの方法があります。これら 3 つの方法の不透明度を 80% に記述する方法は次のとおりです:
Opacity:x css3 の x の値は 0 から 1 です（不透明度など）: 0.8
rgba(red, green, blue, alpha) css3 の alpha の値は 0 から 1 です（rgba など） (255,255,255,0.8)
IE 専用フィルター filter:Alpha(opacity=x)、x の値は 0 から 100 です。たとえば、filter:Alpha(opacity=80)
(推奨ビデオ チュートリアル: css ビデオ チュートリアル )
1. css の不透明度3
互換性: IE6、7、および 8 はサポートされていませんが、 IE9 以降および標準ブラウザがサポートされています サポート
使用説明: 不透明度要素を設定するすべての子孫要素は一緒に透明になります。通常、画像またはモジュールの全体的な不透明度を調整するために使用されます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
padding: 25px;
background-color:#000000;
filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html> 不透明度を使用すると、モジュール全体が透明になります。効果は次のとおりです。
したがって、「透明な背景、不透明なテキスト」を実現するために不透明度を使用することはお勧めできません。 」。
2. css3 の rgba
いわゆる RGBA カラーは、名前が示すとおり、R G B A の色です。赤、緑、青のアルファの色 (赤と緑に変換されます) ブルー アルファの透明色。
background:rgba(200, 54, 54, 0.5);
このうち、半透明を示す0.5の前の0は省略してもよいし、直接.5でもよい。
互換性: IE6、7、8 はサポートされていません。IE9 以降および標準ブラウザーがサポートされています
IE8 ブラウザーが rgba をサポートしていない問題の解決方法:
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
使用説明: 色の不透明度を設定します。通常、背景色、色、ボックスシャドウなどの不透明度を調整するために使用されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html>背景色で rgba を使用します。標準ブラウザでは、背景は透明でテキストは不透明です。効果は次のとおりです。
以上がCSS で背景の透明性を実現する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。