CSS で半透明のスタイルを処理する方法を共有する

プロジェクトでは、写真、テキスト、コンテナ、背景などの半透明を設定する必要がある状況によく遭遇します。これを使用するたびに、その設定方法を忘れてしまいます。私自身の便宜のためにまとめたものです。また、他の人にも共有します。何か必要な場合は、見に来てください。

1. 要素コンテナは透明です

 .div{
opacity: 0.5;   /* Firefox、Chorme、Opera等主流浏览器识别 */
filter:alpha(opacity=50);   /* IE6及以上IE浏览器识别 */
 }

手順:

1. 値は、完全に透明から 0 ～ 1 です。 opaque 1 を超えるとデフォルトは不透明になります。

3 を使用した後は、filter:alpha(opacity= *) の値が 0 ～ 100 になります。この属性は、要素コンテナ内のすべての子要素が継承されます。つまり、すべてが半透明になります。

2. 要素の背景は透明です

 .div{
     background: rgba(0,0,0,.5);    /* Firefox、Chorme、Opera等主流浏览器识别 */ 
     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7f000000, endColorStr=#7f000000);   /* IE6及以上IE浏览器识别 */
 }

説明:

1.background:rgba(m n) ここで、m は rgb カラー値、n です。は透明度で、値は上記の最初のものと同じ 1 ～ 100 です。startColorStr=m、endColor=n ここで、m と n は 2 つの部分で構成され、最初の 2 桁は次のとおりです。透明度と最後の6桁は16色の値です。たとえば、7f は透明度 0.5 を表し、000000 は黒 (000 と省略することはできません) です。2 番目の点では、m=n の場合は均一に透明になり、≠の場合は透明になります。以下は、RGB 透明値 (IEfilter 値) の形式での、値に対応する最初の 2 つの透明度データのセットです:

0.1 -- 19 | 0.2 -- 0.3 -- 4c | 0.4 -- 66 | 0.6 -- 99 | 0.8 -- 0.9 -- e5 |

#説明: 実際には、これは IE6 用です。 IE7 以降のブラウザは、半透明の画像を直接サポートしています。多くの方法があり、専門家は 7 ～ 8 個の方法をまとめています。私がよく使用する方法は次のとおりです。

1. まず、png.js をオンラインでダウンロードします。

2. ページの下部で、本文終了タグと HTML 終了タグの間に次の段落を読み込みます:

<!--[if lte IE 6]>
<script src="js/png.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix(&#39;img, .logo,.ico&#39;);
</script>
<![endif]-->

3。次に、パスが間違って記述されていないことを確認します。最後に、半透明にする必要がある画像要素名またはクラスと ID 名を DD_belatedPNG.fix("") に追加するだけです。

以上がCSS で半透明のスタイルを処理する方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。