0

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

并且只有图像应该具有不透明度。div 中的文本应为纯黑色。

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

4

1 回答 1

1

[答案] 来自 op

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

我启动了The Gimp并在图像本身中添加了 opactiy！正是我想要做的，不需要花哨的 CSS3 ;​​-)

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

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

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

JS 小提琴示例。

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

不透明度 JS 小提琴示例。

请注意，这background-size是一个 CSS3 属性。您可以在此处查看浏览器兼容性图表。但是，这个问题可以通过诸如modernizr之类的库来解决。

于 2013-03-29T00:25:15.207 回答