ホームページ > 記事 > ウェブフロントエンド > CSSで背景の透明度を設定する方法
CSSで背景の透明度を設定する方法
- 王林転載
- 2020-08-29 16:06:443182ブラウズ
背景の透明性を実現するにはさまざまな方法があります。この記事では、次の 2 つの方法を紹介します:
(推奨される関連チュートリアル: CSS チュートリアル）
css3 の opacity:x、x の値は 0 から 1、たとえば opacity: 0.8
css3 の rgba(red、green、blue、alpha)、alpha の値0 から 1、例: rgba(255,255,255,0.8)
1. css3 の不透明度
: IE6、7、8 はサポートされていませんが、IE9 以降は標準ブラウザでサポートされています
使用説明: opacity 要素のすべての子孫要素は、一緒に透明になるように設定されます。これは通常、画像またはモジュールの全体的な不透明度を調整するために使用されます。
<!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>opacity を使用した後
# したがって、「透明な背景、不透明なテキスト」を実現するために不透明度を使用することはお勧めできません。
(ビデオチュートリアルの推奨: css ビデオチュートリアル)
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で背景の透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。