0

いくつかのdivがあり、それぞれに背景画像があります。レスポンシブでアダプティブなCSSを使用していますが、divの幅が特定のサイズ（760px btw）未満になると、テキストとスタイルが設定された一部のテーブルが読みにくくなり、背景画像が背後に移動します（背景画像はテキスト/表の右端にあり、幅が760pxを超えている場合は目立たないようになっています...）。したがって、ビューポートの幅が760px以下になったら、背景画像に不透明度を持たせたいだけです...

それ、どうやったら出来るの？

したがって、私のCSSは次のように始まります。

@media screen and (max-width: 760px){
   background: #cdcdcd url("/images/back.jpg") no-repeat top right;
    /*How do I set the opacity of only the background?*/
}
4

2 に答える 2

3

別のコンテナに移動しない限り、背景画像の不透明度を変更することはできません。

変更できるのは、以下を使用したBGカラーの不透明度だけですrgba()。

background: rgba(0, 0, 0, .5);
于 2012-08-16T18:29:34.610 に答える
1

背景だけに不透明度を設定することはできませんが、要素全体を設定できます。背景色の不透明度を設定できます（例については、 Zoltanの回答を参照してください）。

画像の上に白を設定<div>して、不透明度を変更できます。

<div class="yourImage">
    <div class="imageCover"></div>
</div>

.yourImage {
  background: url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png);
  width: 300px;
  height: 83px;
}
.imageCover {
  background: #fff;
  width: 300px;
  height: 83px;
  opacity: .5;
}

ライブデモ：Tinkerbin


ただし、画像の背後にきれいな背景がない場合、これは機能しません。

于 2012-08-16T18:49:22.023 に答える