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;

小提琴：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包含有关分层速记声明如何映射到各自的长号的详细信息。

另请注意，您需要为前缀渐变重复此缩写，否则不识别未固定渐变的浏览器将忽略整个速记声明。由于您正在处理前缀渐变，我强烈建议您使用longhands，这样您就可以自己指定background-image，而不必担心其他属性。

速记背景属性

1 个答案: