css - 速记背景属性

Question

下面的简写背景属性是什么？

body {
    background-color:#161515;
    background-image:-webkit-linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), -webkit-linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%);
    background-image:linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%);
    background-position:0 0, 20px 20px;
    background-size:40px 40px;
}

我失败的尝试:

background: #161515 linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%), linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 0 0, 20px 20px / 40px 40px;

fiddle :http://jsfiddle.net/sw5sevnt/1/

我相信它会因为背景位置而崩溃:0 0, 20px 20px

Answer 1

在 background 速记中，您在每个逗号分隔值中指定所有速记。这意味着您的 background-position 值需要分配给每个渐变，并且背景颜色需要进入最后一层(它可能出现在该层的任何地方，只要它在最后一层):

background: linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 0 0/40px 40px,
            linear-gradient(45deg, #0c0b0c 25%, transparent 25%, transparent 75%, #0c0b0c 75%) 20px 20px/40px 40px #161515;

请注意，由于您的 background-size 手写体只有一个值，因此需要在两个图层中重复相同的值。 spec包含有关分层速记声明如何映射到其各自的速记的详细信息。

另请注意，您需要为带前缀的渐变重复此简写，否则不识别无前缀渐变的浏览器将忽略整个 简写声明。由于您要处理带前缀的渐变，我强烈建议您改用普通字符，这样您就可以自己指定 background-image 而不必担心其他属性。