CSSで背景の透明度を設定する方法-CSSチュートリアル-php.cn

CSSで背景の透明度を設定する方法

王林

リリース： 2020-08-29 16:06:44

転載

3298 人が閲覧しました

CSSで背景の透明度を設定する方法

背景の透明性を実現するにはさまざまな方法があります。この記事では、次の 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で背景の透明度を設定する方法

# したがって、「透明な背景、不透明なテキスト」を実現するために不透明度を使用することはお勧めできません。

(ビデオチュートリアルの推奨: 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で背景の透明度を設定する方法