Shorthand CSS 与普通写法不同

Question

正如我在标题中所说，这个shorthand:

.settingsSelect {
    background: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png') no-repeat, repeat 97%, 0;
    background-size: 12px, contain;
}

显示为

并使用适当的手写：

.settingsSelect {
    background-image: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png');
    background-position: 97%, 0;
    background-repeat: no-repeat, repeat;
    background-size: 12px, contain;
}

一切如预期。

问题出在哪里？谢谢。

Answer 1

shorthand 版本中的语法不正确。应该是：

.settingsSelect {
  background: url('../images/Custom.Select.Background.png') no-repeat 97%, url('../images/Settings.Input.Background.png') repeat 0;
}

可以这样想：

.selector {
  background: background1, background2, background3, etc;
}

其中 background1、background2 等各是 shorthand background 个：

url() repeat X%;

Shorthand CSS 与普通写法不同

Shorthand CSS is not same as longhand

css

shorthand