4

重複の可能性：
CSS不透明度プロパティ

透明度のある画像にレイヤーを作成しているのですが、問題が発生しました。

レイヤーにテキストを書き留めると、同じ透明度が得られます。

継承の問題が原因だと思い、子divをリセットするために「position：relative」を追加しましたが、まったく機能しませんでした。

子div（以下の#TXT）の不透明度をリセットしたいだけです。

これが私のコードです。

<!DOCTYPE html>
<html>
<header>
    <meta charset="UTF-8">
    <style type="text/css">
        *{margin: 0; padding:0; background-color: #555;}
        #wrapper {
            margin:0 auto; 
            background-color: white;
            width: 922px;
            height:349px;
            margin-top: 150px;
            -webkit-box-shadow: 0px 0px 7px 7px #333;
            -moz-box-shadow: 0px 0px 7px 7px #333;
            }   

        #ImgSection {
            width: 922px;
            height: 349px;
            background-color: white;
            position: absolute;
            background: url("brand-new-car.jpg") -50px -200px no-repeat;
            }

        #TxtSection {
            width: 322px;
            height: 349px;
            background-color: #222;
            opacity: .5;        
            float: right;
            -webkit-box-shadow: inset 3px 0px 3px 0px black;
            -moz-box-shadow: inset 3px 0px 3px 0px black;
            }

            #TXT{
            position: relative;
            font-size: 50px;
            opacity: 1;
            }

    </style>
    <script type="text/javascript">

    </script>
</header>
<body>
    <div id="wrapper">
        <div id="ImgSection"></div>
        <div id="TxtSection">
            <div id="TXT">dsdsad</div>
        </div>
    </div>
</body>
</html>

画像brand-new-car.jpgのサイズは1024x768です。

そして、＃TXTの不透明度をリセットする方法を知りたいです。

助けてください。

前もって感謝します。

4

3 に答える 3

8

こんにちは私はあなたが背景の不透明度を増減することができ、それがテキストの色に影響を与えないプロパティに言及していますその単純なcssを参照してください基本的にあなたは不透明度のために背景アルパでrgb色を使用する必要があります。

背景：rgba（146,146,146,0.1）;

または例を参照してください：-http：//jsfiddle.net/8LFLd/3/

于 2012-04-09T12:06:16.757 に答える
4

hslaまたはrgbaは色に対してのみ機能するため、透明度のある画像を作成する場合は、ハックする必要があります。HTMLを変更し、テキストラッパーを取り出して、画像レイヤー上に配置する必要があります。これが唯一の方法です。

ここでは、同じハックをサポートしているChrisCoyierを見つけることができます。http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

于 2012-04-09T08:43:37.003 に答える
2

不透明度をリセットすることはできません。すべての子孫に継承されます。

だが：

  • テキストと境界線にrbga/hsla/alpha-png背景色とrgba/hsla色を使用して、同様の効果を実現できます（ただし、より多くの作業が必要です）。
于 2012-04-09T08:18:39.810 に答える