透明な背景と不透明なテキストの互換性のある処理

PC側のプロジェクトを実行しているときに、透明な背景と透明な画像が必要になることがよくありますが、透明性に関する多くの問題が発生します。特に、背景の透明なコンテンツが不透明な場合、すべてのブラウザーとの互換性を維持するのが難しくなります。

すべてのブラウザと互換性のある透明な背景と不透明なテキストを実現するにはどうすればよいですか？

実際、透明度の調整について私たちが通常言うことは、以下に示すように、実際にはスタイルの不透明度を調整することです。

レイヤーパネルでpsを開くと、設定レイヤー調整の不透明度のメニューが0％（完全に透明）から100％（不透明）まで表示されます。

透明なcssスタイルを実現するには、通常3つの方法があります。次に、不透明度が50％の書き込み方法を示します。

css3のopacity:value場合value 、値の範囲は0〜1 で、不透明度は0.5などです。
CSS3のためにrgba(red, green, blue, alpha)、alpha（透明度）の値は0から1の範囲、などrgba(255,255,255,0.5)
IE排他フィルター filter:Alpha(opacity=value)、value 0から100までの値の範囲。filter:Alpha(opacity=50)

1つずつ説明しましょう。

1. Css3の不透明度

互換性：Css3の不透明度は、IEの下位バージョンと互換性がなく、IE6 / 7/8ではサポートされておらず、IE9以上でサポートされています

opacity該当する状況：opacityセット要素が透明であるだけでなく、子孫要素も継承されopacity、透明効果もあるので、opacity通常、個々の画像または一部のモジュールの透明度を調整するために使用されます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
       .content{
           width: 200px;
           height: 100px;
           padding: 50px 50px;
           background-color: red;
           opacity: 0.5;
           /* 设置不透明度50% */
       }
       p{
           width: 100px;
           height: 100px;
           background: green;  
       }
    </style>
</head>
<body>
    <div class="content">
        <p>背景透明,内容也透明</p>
    </div>
</body>
</html>

使用後opacity、以下に示すように、モジュール全体が透明になります。

その場合、opacity実現（透明な背景、不透明なテキスト）の使用は不可能です。

2. css3のrgba

互換性：IE6、7、8はサポートされていません。IE9以上のバージョンと標準ブラウザはすべてサポートされています。

使用方法：設定した色を使用する限り、色の透明度を設定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
       .content{
           width: 200px;
           height: 100px;
           padding: 50px 50px;
           background-color: rgba(255, 0, 0, 0.5);
           /* 用rgba设置背景透明，内容不会受影响 */
           
       }
       p{
           width: 100px;
           height: 100px;
           background: green;  
       }
    </style>
</head>
<body>
    <div class="content">
        <p>背景透明,内容也透明</p>
    </div>
</body>
</html>

私たちが望む効果

私たちが望む効果

IE 6、7、8rgbaのエラー表示

したがって、rgbaは必要な効果を設定できますが、互換性があります。IE6、7、8の設定rgbaは正しく表示されず、認識できませんが、IE専用フィルターがあり `filter:Alpha(opacity=x)`、一緒に確認できます。

3. IE専用フィルターフィルター：Alpha（opacity = x）

使用手順：IEブラウザー専用で、多くの問題があります。この記事では、次のように、背景の透明度の設定を例として取り上げます。

IE6、7、8、9のみをサポートし、IE10で廃止されました
IE6と7では、IEのhaslayoutプロパティ（例：* zoom：1または* overflow：hidden）をアクティブにして、filter：Alphaを理解する必要があります。
IE6、7、および8では、filter：Alpha要素が設定され、親要素がposition：static（デフォルト属性）に設定されており、その子要素は相対的に配置されているため、子要素を不透明にすることができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
       .content{
           width: 200px;
           height: 100px;
           padding: 50px 50px;
           background-color: red;
           filter:Alpha(opacity=50);
           /* 只支持IE6、7、8、9 */
           position:static; 
           /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
           *zoom:1; 
           /* 激活IE6、7的haslayout属性，让它读懂Alpha */
           
       }
       p{
           width: 100px;
           height: 100px;
           background: green; 
           position: relative; 
       }
    </style>
</head>
<body>
    <div class="content">
        <p>背景透明,内容也透明</p>
    </div>
</body>
</html>

IE6、7、8はフィルターfilterを認識できます

IE10バージョンは廃止され、IE10以上は認識されません

4.透過的で完全に互換性のあるソリューション

上記の分析から、透明な背景コンテンツの設定は不透明であり、使用可能なプロパティはrgbaとIEの専用フィルターであることがわかりますfilter:Alpha

IE6、7、および8のブラウザーでは、fitterフィルターを使用できます。標準のブラウザーでは、rgbaを使用します。したがって、問題は、IE9ブラウザーが両方の属性をサポートしていることです。これらを一緒に使用すると、不透明度が繰り返し減少します。次に、 IE6、7、8の使用fiter:Alpha方法 CssHackを使用してIE関連のハックをセットアップし、IE 6、7、および8のみをサポートする方法を見つけることができます。

 /* 只支持IE6、7、8 */
 @media \0screen\,screen\9 {...}

透明性の問題はすべて解決され、コード全体は次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
       .content{
           width: 200px;
           height: 100px;
           padding: 50px 50px;
           background-color: rgba(255, 0, 0, 0.5);     
       }
       p{
           width: 100px;
           height: 100px;
           background: green; 
       }

       @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
        .content{
            background-color:red;
            filter:Alpha(opacity=50);
            position:static; 
            /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
            *zoom:1; 
            /* 激活IE6、7的haslayout属性，让它读懂Alpha */
        }
        .content p{
            position: relative;
            /* 设置子元素为相对定位，可让子元素不继承Alpha值 */
        }  
      }
    </style>
</head>
<body>
    <div class="content">
        <p>背景透明,内容也透明</p>
    </div>
</body>
</html>