3

次の方法で背景の不透明度を適切に設定する方法:

<body style="background-image: url(images/background.jpg); background-color: white;
 background-position: center center; background-size: 100%; 
 background-repeat: no-repeat">

私は試してみます：

background-opacity: 0.5;

しかし、失敗します。

次のようになります。

background-image: url(images/background.jpg) opacity: 0.5;

平、

opacity: .4;

イメージには影響しませんが、テキストと本文全体に影響します。

div を含むソリューションは受け入れられません。

私のウェブページ: http ://shell.bshel​​lz.net/~panzerdivision/

ブラウザ: Firefox & Chrome

4

4 に答える 4

2

プロパティを使用しopacityて、要素自体の不透明度を変更します。

透明にするには、代わりに背景色としてbackground-color使用できます。rgba()

background-color: rgba(255, 255, 255, .5);

または簡単に言えば：

background: rgba(255, 255, 255, .5) url(path/to/transparent/background.png) center center no-repeat;

ただし、透明な背景画像が必要な場合は、画像自体を透明にする必要があります。

ちなみに、ここに不透明度を与える解決策background-imageがありますが、この場合に役立つかどうかはわかりません。

于 2013-08-28T12:51:39.310 に答える
0

https://css-tricks.com/maybe-there-kinda-is-background-opacity/から

.el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7),
    50%
  );

透過的な base64 url​​ エンコードされた gif で画像をフェードすることで、何年も前に望んでいた場所に到達できます。:)

現在、Firefox では動作しません。:(

于 2021-12-16T04:20:42.503 に答える