0

私がやりたいのはdiv、テキストに影響を与えない透明な背景を持つことです。次の HTML を検討してください。

<section class="content">
    <header>
        <h1>Description</h1>
    </header>
    Code
</section>

次の CSS を指定するとします。

background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);

テキストは、section. そこで、次のようにコンテンツをレイヤー化しようと始めました。

<div class="code-sample">
    <div class="background"></div>
    <section class="content">
        <header>
            <h1>Description</h1>
        </header>
        Code
    </section>
</div>

ただし、数え切れないほどの繰り返しでは、sectionto レイヤーをdiv. 正直に言うと、私は内部divとsection絶対と相対を位置づけてみました。を使ってみましたz-index。しかし、実際には、ここで暗闇の中で撮影しているだけです。.background透明な外観にしたい：

background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);

しかし、それでもその.contentオーバーレイはdiv. これにより、div をフロートさせて.code-sample、それらを 3 列のレイアウトにすることができます。

探しているものをどのように達成できますか?

4

3 に答える 3

1

RGBa を使用すると、Firefox でテキストの縁が粗くなることがあります。そのため、半透明の png を背景として使用する方がよい場合もあります (data-uri を使用する場合があります)。

于 2013-07-15T15:28:15.847 に答える
1

RGB カラーを使用して、背景の透明度のみを設定します。

.class {    
   /* Fallback for web browsers that don't support RGBa */
   background-color: rgb(0, 0, 0);
   /* RGBa with 0.6 opacity */
   background-color: rgba(0, 0, 0, 0.6);
   /* For IE 5.5 - 7*/
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
   /* For IE 8*/
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

ソース

于 2013-07-15T15:02:43.523 に答える
1

追加の背景 div は必要ありません。.section で RGBA 値を使用して、子要素に影響を与えない半透明の背景を取得します。

.content {
background: rgba(0, 0, 0, 0.2)
}
于 2013-07-15T15:04:07.993 に答える