html - 用 CSS 渐变替换背景图片

Question

我用一张图片作为id为header的定宽div的背景，相关的CSS规则是

#header {
  background: url("bg.png") no-repeat scroll center top rgba(0, 0, 0, 0);
}

我试图让这个页面更具响应性，这意味着 header 的宽度现在是可变的。在无响应页面中，header 元素始终与背景图像宽度相同，但在响应式设计中，元素可以比图像更宽或更窄。我需要在响应式页面中使用相同的背景样式，但当元素和图像的大小不匹配时，我找不到执行此操作的方法。

Answer 1

你可以考虑

background: url("bg.png") repeat-y top left;
background-size: cover;

W3schools has more info on the background-size property

编辑: Since that W3Schools seems a form of heresy, here is another reference