802

次のコードに似たものを使用しています。

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

これにより、背景の不透明度が 0.4 になり、テキストの不透明度が 100% になると予想していました。代わりに、両方とも 0.4 の不透明度を持っています。

4

8 に答える 8

1307

子は不透明度を継承します。そうしないと奇妙で不便です。

背景画像に半透明の PNG ファイルを使用するか、背景色に RGBa (アルファの a) 色を使用できます。

例、50% 色あせた黒の背景:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

于 2012-05-02T23:07:20.533 に答える
231

疑似要素を使用し::beforeたり::after、半透明の背景を取得したりできます。これは 1 つのコンテナーで行うことができます。次のようなものを使用します。

<article>
  Text.
</article>

次に、いくつかの CSS を適用します。

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

例：

body {
  background: red;
}

article {
  position: relative;
  z-index: 1;
}

article:before {
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100px;  
  opacity: .4; 
  z-index: -1;
  background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}
<article>
  Text.
</article>

注: 値の調整が必要になる場合がありz-indexます。

于 2013-09-24T15:26:58.280 に答える
59

問題を解決するには、次の方法を使用できます。

  1. CSS アルファ透過方式 (Internet Explorer 8 では機能しません):

    #div{background-color:rgba(255,0,0,0.5);}

  2. 選択した透明な PNG 画像を背景として使用します。

  3. 次の CSS コード スニペットを使用して、クロス ブラウザーのアルファ透過背景を作成します。#000000@ 0.4% の不透明度の例を次に示します。

    .div {
    background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

この手法の詳細については、オンラインの CSS ジェネレーターがあるこのを参照してください。

于 2013-09-24T16:06:32.510 に答える
42

私はこのようなことをします

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

それはうまくいくはずです。これは、色ではなく、半透明の画像 BTW が必要であると想定しています (rgba を使用する必要があります)。また、Photoshop で事前に画像の不透明度を変更することはできないと想定されています。

于 2012-05-02T23:28:58.623 に答える
8 
.transbg{/* 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)";}
于 2014-03-16T06:08:45.880 に答える
5

これは、内側の div がネストされている div の不透明度 100% (不透明度 40%) であるためです。

それを回避するために、できることがいくつかあります。

次のように、2 つの別個の div を作成できます。

<div id="background"></div>
<div id="bContent"></div>

背景に目的の CSS 不透明度とその他のプロパティを設定し、z-index プロパティ ( z-index ) を使用して bContent div のスタイルと配置を行います。これにより、不透明度をいじることなく、背景の div の上に div を配置できます。

別のオプションはRGBaです。これにより、div をネストしても、div 固有の不透明度を実現できます。

最後のオプションは、任意の画像エディターで必要な色の半透明の .png 画像を作成し、background-image プロパティを画像の URL に設定するだけです。 CSS を使用すると、ネストされた div 構造の機能と組織が失われます。

于 2012-05-02T23:14:06.940 に答える
3

前景の幅と高さを背景と同じにするか、上、下、左、右のプロパティを持つようにしてください。

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>
于 2016-07-25T23:57:22.913 に答える