web-dev-qa-db-ja.com

html / cssで子要素に影響を与えずに不透明度を適用する方法は？

私はhtmlとcssを使用してこれを達成したい：

schema

コンテナの不透明度を0.3に、ボックスを1に設定しようとしましたが、機能しません。両方のdivの不透明度は0.3です。

jsFiddle of try here

私が達成しようとしている効果は、ページの上部に表示されるポップアップボックスです。下のコンテンツをフェードアウトすることにより（不透明度を下げることにより）強調表示されます。

htmlcssopacity
40
Benjamin Crouzier

私の知る限り、簡単な方法ではできません。ここにはいくつかのオプションがあります：

  1. コンテナの「内側」にボックスを配置するには、絶対配置を使用します。

    #container {
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;
}
#box {
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;
}
    <div id="container"></div>
<div id="box">
    <p>Something in here</p>
</div>

  2. Javascriptを使用します-上記とほぼ同じですが、位置とサイズをハードコーディングする必要はありません。

19
Ilia Frenkel

次のように、背景色と組み合わせて不透明度を使用できます。

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

ライブデモ

74
Rohit Azad

Rgbaを画像の「プレコンテンツ」オーバーレイとして使用してみてください。これは、物事の応答性を維持し、他の要素が影響を受けないようにする良い方法です。

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}
<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

動作中のコードペンはこちらをご覧ください

5
Jon Bennett

このCSSルールを適用

.alpha60 { 

/* Fallback for web browsers that doesn't support RGBa */ 

background: rgb(0, 0, 0); 

/* RGBa with 0.6 opacity */ 

background: 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)"; 
}

これに加えて、背景を宣言する必要があります：IE web browsers。

詳細については、次のリンクをご覧ください。

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

2
vinitha

別の回避策は、単にオーバーレイの背景を使用して同様の効果を作成することです。

個人的には、不透明度が約65％の黒のオーバーレイが好きですが、あなたがしようとしていることのために、70％のラウンドで白のオーバーレイを使用することができます。

PhotoshopまたはGIMPで、希望する色と不透明度の小さな（100 x 100以下）PNGを作成します。次に、それをライトボックスの背景として設定します。

異なる不透明度で複数のPNGを作成する場合は、JSを使用するか、バックエンドスクリプトを使用してロード時に動的に簡単に切り替えることができます。

技術的にはあなたがやろうとしていることではありませんが、審美的には非常に似たような効果を与えることができ、UXは同じことを達成します。また、非常に簡単に実行でき、ほとんどすべてで広くサポートされています。

1
Brian D.

これは最も正統的な方法ではないかもしれませんが、繰り返すdiv /コンテナごとに小さな半透明の背景画像を使用できます。この日と年齢では、jsなしで純粋な（単純ではない）CSSでこれを達成できるはずですが、上記の答えが示すように、それはそれほど簡単ではありません...

タイル化された画像の使用は時代遅れに見えるかもしれませんが、すべてのブラウザで問題なく動作します。

0
megaSteve4

コンテナの兄弟をコンテナの背後に絶対サイズで同じサイズで追加し、不透明度を適用できます。

そして、コンテナの背景を使用しません。

現在、コンテナの子には不透明な親がなく、問題はなくなります。

0
Mikhail Batcer

不透明度の代わりにbackground-color: rgba(#777788, 0.3);を使用すると、問題が解決する可能性があります。

0
Claudio

不透明度が設定された要素の子は、その不透明度を引き継ぎます。

このスタイルを実現するには、背景にIE、テキスト要素に不透明度のrgbaカラーとフィルターを使用できます。2番目のボックスがテキスト要素の子でない限り、不透明度を継承しません。

0
michaelward82