0

CSS を使用して不透明なアンダーレイを追加しようとしています。

私が間違っていることを理解するのを手伝ってもらえますか?

CSS

popUp#translucent{
    width: 400px;
    height: 100px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    position:fixed;
    opacity: .4;
}

popUp#content{
width:400px;
height: 100px;

}
#popContainer{
width: 400px;
height: 100px;
display: visible;
position: fixed;
z-index: 1000;
}

HTML

<div id="popContainer">
    <popUp id="translucent"></popUp>
    <popUp id = "content">
        <button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button>
    </popUp>
</div>

http://jsfiddle.net/CeRX3/

ありがとう

4

2 に答える 2

1

CSS を使用してボタンのアンダーレイを作成する方法を次に示します。

w3 スクールのコードを使用して作成されたこのフィドルを確認してください。

html

<div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    </p>
    </div>
    </div>

CSS

div.background
  {
  width:500px;
  height:250px;
  background:url(http://www.w3schools.com/css/klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }

上記のコードを使用できます。CSS の不透明度にはこの問題があります。

CSS の不透明度の問題 問題は、このコードが影響する html 要素に子要素を追加するときに発生します。すべての子要素に完全な不透明度を指定しようとしても、すべての子要素は同じ不透明度設定を継承します (これを行うには面倒です)。

ハッキーな解決法 この問題を回避するにはどうすればよいでしょうか? 場合によっては、絶対配置を使用して要素間の親子関係を視覚的に模倣することができ、これにより問題が解決されます。次に、問題を解決したい場合は、目的のために回避策を使用する必要がある場合があります。

于 2013-01-20T18:56:38.780 に答える
0

背景色を灰色に、不透明度を半透明で .1 に変更します。より透明に見えます。

于 2013-01-20T18:46:27.537 に答える