Question

我很难让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：background-size example

Answer 1

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

background-size: 800px 800px;

View on JSFiddle

话虽如此，你所做的是合规with the CSS3 specs。然而，根据to the MDN - 以及我们可以从您的实验中收集的内容 - 浏览器对此规范的遵从性是不一致且不可靠的。因此，目前，最好明确定义两个方向。

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

CSS3背景大小似乎不起作用

1 个答案: