0

簡単に見えるかもしれませんが、半透明のコンテナを使用して Web サイトの背景を作成する必要があります。opacity: 0.5;の中に追加する#contentと、コンテナ全体になり、すべてのウィジェットと文字がゴーストになります。背景画像のみに透明度を適用するにはどうすればよいですか? 1 つの答えは、PS 内の画像に透明度を追加することですが、それでも私は興味があります。

#content .container {
    background:url(images/menu_bar.png) left top repeat-y !important;
}
4

4 に答える 4

1

この問題を回避する 1 つの方法は、position 属性と z-index 属性を使用することです。透明にしたい要素は下にあり、不透明なコンテンツはその上に配置されます。

例：

#transparent-box {
   position: absolute; top: 10px; left: 10px;
   z-index: 1;
   }

#opaque-content {
   position: absolute; top: 20px; left: 20px;
   z-index: 2;
   }

警告：

この方法を使用する場合は、コンテンツに含めるインデント/パディングを念頭に置き、適切に配置する必要があります。

それが役立つことを願っています。

于 2013-08-14T01:47:21.203 に答える
1

これを試してください：

#content .container {
  width: 500px;
  height: 100px;
  background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}

rgba の「a」は、「rgb」である色の不透明度を設定します。もちろん、好みに合わせて値を設定することもできます。これで問題が解決する場合は、チェックマークをクリックしてください ;)

また、画像の幅と高さを設定することを忘れないでください。

于 2013-08-14T01:38:41.403 に答える
1

あなたは興味深い問題を抱えています - そのようなものには常に興味深い解決策があります。私は CSS の大ファンであり、いくつかの CSS プロパティを使用して必要な動作を模倣しようとしました: http://jsfiddle.net/Tax4w/

ただし、これが必要なものではない場合は、必要に応じていつでも調整できます。

注: 最初はテキストも透明に見えますが、注意して見るとそうではありません

HTML:

<div class="container">
    <div class="inner-container">
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
    </div>
</div>

CSS:

.container{
    width:500px;
    height:500px;
    background-color:#eeeeee;
    position:relative;
}

.inner-container:after{
    content:"";
    background: url('http://placekitten.com/500/500') left top no-repeat;
    width:500px;
    height:500px;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
}

.inner-container{
    width:500px;
    height:500px;
}

p{
    font-size:20px;
}
于 2013-08-14T01:55:18.207 に答える