web-dev-qa-db-ja.com

背景色だけに対するCSS不透明度、その上のテキストではない？

opacityプロパティをbackgroundのdivプロパティにのみ割り当て、その上のテキストには割り当てることができますか？

私はもう試した：

background: #CCC;
opacity: 0.6;

しかし、これは不透明度を変えません。

cssopacity
741
Jay

透明な背景を使いたいように思えます、その場合は rgba() 関数を使ってみることができます。

rgba(R, G, B, A)

R（赤）、G（緑）、およびB（青）は、<integer>sまたは<percentage>sのいずれかになります。255は100％に相当します。 （アルファ）は、0から1までの<number>、または<percentage>で、1は100％（完全な不透明度）に対応します。

RGBaの例

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */

rgbaの使い方を示す小さな example 。

2018年現在、実質的に すべてのブラウザがrgba構文 をサポートしています。

1291
Tim Cooper

これを行う最も簡単な方法は2 div、1は背景、1はテキストです。

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>
74
Kostas

少ない ユーザーのみ：

RGBAを使用せずにHEXを使用して色を設定したくない場合は、解決策があります。

次のようなミックスインを使うことができます：

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

そしてそれを次のように使います。

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

実際にこれは 組み込みLess関数 が提供するものです。

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Lessコンパイラを使って16進数の色をrgbaに変換するにはどうすればよいですか？を参照してください。

20
Sebastien Lorber

これはすべてのブラウザで動作します

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

透明度がコンテナ全体とその子に影響を与えたくない場合は、この回避策を確認してください。これを達成するには、絶対位置の子供と相対位置の親が必要です。 子要素に影響しないCSS不透明度

CSSの不透明度が "Children"に影響しない実用的なデモを確認してください

17
Hussein

私のトリックは色付きの透明な.pngを作成してbackground:url()を使うことです。

12
user1542894

私は同じ問題を抱えていました。私は100％透明な背景色が欲しいです。このコードを使うだけです。それは私にとって素晴らしい仕事でした：

rgba(54, 25, 25, .00004);

このWebページの 左側に例があります （連絡先フォーム領域）。

8
user2178930

これを行うための素晴らしい方法は確かにCSS 3を使用することでしょう。

クラスのdiv幅を作成します。あなたのページの上にスーパーサイザー：

その後、以下のCSSプロパティを設定します。

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>
5
Wolfgang Zotter

このスレッドに遭遇する人のために、この問題を自動的に解決することを書いたばかりのthatsNotYoChild.jsというスクリプトがあります。

http://www.impressivewebs.com/fixing-parent-child-opacity/ /

基本的に、それは子を親要素から分離しますが、要素をページ上の同じ物理的位置に保ちます。

2
Louis L.

最も簡単な解決策は3 divsを作成することです。他の2を含むもの、透明な背景を持つもの、そして内容を持つもの。最初のdivの位置を相対にして、透明な背景を持つものを負のz-indexに設定してから、透明な背景に合うようにコンテンツの位置を調整します。こうすれば絶対位置の問題を抱えない。

1
Balsa