CSS で背景の透明性を実現する 3 つの方法-CSSチュートリアル-php.cn

CSS で背景の透明性を実現する 3 つの方法

王林

リリース： 2020-06-10 09:17:11

転載

4992 人が閲覧しました

CSS で背景の透明性を実現する 3 つの方法

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>

ログイン後にコピー

不透明度を使用すると、モジュール全体が透明になります。効果は次のとおりです。

CSS で背景の透明性を実現する 3 つの方法

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

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 つの方法