0

<div>の束を含む があり、テキスト<p>の背後に不透明な背景画像を配置し、全体を埋めるようにスケーリングしたいと考えています<div>。つまり、追加または削除するテキストの量に関係なく、画像は拡大または縮小して、の背景全体をカバーする必要があり<div>ます。

そして、画像だけが不透明になるはずです。div 内のテキストは黒一色である必要があります。

どうすればいいですか？(CSS3 をサポートしていないブラウザーについて心配する必要はありますか?)

4

1 に答える 1

1

【回答】opより

私は一歩下がって問題を別の方法で見て、クロスブラウザーであり、CSS3 を必要としない答えを見つけました。

Gimpを起動して、画像自体に不透明度を追加しました! 派手なCSS3は必要ありません;-)

@JSW189 さん、ご協力ありがとうございます。回答に投稿してもかまわないことを願っていますが、これが私が選んだ解決策です。

プロパティを使用しbackground-imageて画像を追加しbackground-size:100%、背景画像で div 全体を塗りつぶします。

div {
    background-image:url('image_url_goes_here.jpg');
    background-size: 100%;
}

JSフィドルの例。

さらに、不透明度を切り替えたい場合は、opacityプロパティを使用できます。デフォルトでは (不透明) に設定されてopacity:1いますが、不透明度を と の間1で切り替えることで変更できます0。たとえば、不透明度を 50% にしたい場合は、 を使用しますopacity:.5。

不透明度 JS フィドルの例。

background-sizeCSS3 プロパティであることに注意してください。ブラウザの互換性チャートはこちらでご覧いただけます。ただし、この問題はmodernizrなどのライブラリで解決できます。

于 2013-03-29T00:25:15.207 に答える