Question

我有一个<div>，其中包含一堆<p> s，并希望在文字后面有一个不透明的背景图片，缩放以填充整个<div>。即无论我添加或删除多少文字，图像都应该增大或缩小以覆盖<div>的整个背景。

只有图像应该具有不透明度。 div中的文字应该是纯黑色。

我该怎么办？（我是否必须担心不支持CSS3的浏览器？）

Answer 1

[答案]来自o.p.

我退后一步，以另一种方式看问题，找到一个跨浏览器的答案，不需要CSS3。

我解雇了The Gimp并在图片中添加了不透明度！正是我想要做的事情，没有必要的花哨CSS3; - ）

非常感谢你的帮助，@ JSW189。我希望你不介意我在你的回答中发帖，但这是我选择的解决方案。

您想使用background-image属性添加图片，然后使用background-size:100%让背景图片填充整个div。

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

此外，如果您想要使用不透明度切换，可以使用opacity属性。默认设置为opacity:1（不透明），但您可以通过在1和0之间切换不透明度来更改它。因此，例如，如果您想要50％的不透明度，则可以使用opacity:.5。

请注意background-size是CSS3属性。你可以看到browser compatibility chart here。但是，modernizr等库可以解决这个问题。