如何在div上有不透明的背景圖片？

Question

我有一個<div>其中包含一堆<p> s，並希望在文本後面有一個不透明的背景圖像，縮放以填充整個<div>。即無論我添加或刪除多少文字，圖片都會增大或縮小以覆蓋整個背景<div>。

只有圖像應該有不透明度。 div內的文字應該是純黑的。

請問我該怎麼做？ （我是否擔心瀏覽器不支持CSS3？）

Answer 1

[Answer] from o.p.

我退後一步，以另一種方式看問題，發現一個跨瀏覽器的答案，不需要CSS3。

我開火了The Gimp，並在圖像本身添加了opactiy！正是我想要做的，沒有花哨的CSS3必要;-)

非常感謝您的幫助，@ JSW189。我希望你不介意我在你的回答中張貼，但這是我選擇的解決方案。

---

你想使用background-image屬性添加圖像，然後background-size:100%有背景圖像填充整個股利。

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

JS Fiddle Example。

此外，如果您想切換不透明度，可以使用opacity屬性。它默認設置爲opacity:1（不透明），但您可以通過切換1和0之間的不透明度來更改該設置。因此，例如，如果您想要50％的不透明度，則可以使用opacity:.5。

Opacity JS Fiddle Example。

請注意，background-size是一個CSS3屬性。您可以看到browser compatibility chart here。但是，這個問題可以通過像modernizr這樣的庫來解決。