[英]CSS3 background-size doesn't seem to work
I'm struggling to get the size of CSS3 gradients to work properly. 我正在努力使CSS3渐变的大小正常工作。 I've set a
background-size:800px;
我设置了一个
background-size:800px;
yet, as seen in the jsfiddle below, it most certainly isn't 800px. 然而,正如下面的jsfiddle所见,它肯定不是800px。 Have I misunderstood the property?
我误解了这个属性吗? It seems to work differently in different circumstances;
它似乎在不同的情况下有所不同; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.
当没有其他标题使用时,背景会随浏览器调整大小,当包含在H5BP中时,它不会调整大小,但是它的高度太短。
I am very very confused! 我很困惑! How on earth do I create a repeating background gradient of a specific size?
我该如何创建特定大小的重复背景渐变?
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 jsfiddle: background-size示例
You need to specify the size in both the x and y direction, like so: 您需要在x和y方向指定大小,如下所示:
background-size: 800px 800px;
With that said, what you've done is compliant with the CSS3 specs . 话虽如此,你所做的是符合CSS3规范 。 According to the MDN , however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable.
然而,根据MDN的说法 - 以及我们可以从您的实验中收集的内容 - 浏览器对此规范的遵从性是不一致且不可靠的。 So, for now, it's best to explicitly define both directions.
因此,目前,最好明确定义两个方向。
Once browsers' behavior complies with the specs, setting a single value will set the other to be auto
. 一旦浏览器的行为符合规范,设置单个值会将另一个设置为
auto
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.