1

我正在努力让 CSS3 渐变的大小正常工作。我已经设置了一个background-size:800px;，如下面的 jsfiddle 所示，它肯定不是 800px。我对物业有误解吗？它似乎在不同情况下的工作方式不同；当不使用其他标题时，背景会随浏览器调整大小，当包含在 H5BP 中时，它不会调整大小，但高度太短。

我非常非常困惑！我到底如何创建特定大小的重复背景渐变？

body {
  background: #0d1a2d;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
  background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-size: 800px;
}

jsfiddle：背景大小示例

4

1 回答 1

3

您需要指定 x 和 y 方向的大小，如下所示：

background-size: 800px 800px;

在 JSFiddle 上查看

话虽如此，您所做的是符合CSS3 规范的。然而，根据MDN ——以及我们可以从您的实验中收集到的信息——浏览器对本规范的遵从性是不一致且不可靠的。所以，就目前而言，最好明确定义两个方向。

一旦浏览器的行为符合规范，设置一个值会将另一个设置为auto.

于 2013-04-12T23:32:30.127 回答