速记 CSS 与速记不同答案

【问题标题】：Shorthand CSS is not same as longhand速记 CSS 与速记不同
【发布时间】：2017-09-28 04:58:54
【问题描述】：

正如我在标题中所说，这个速记：

.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;
}

一切都按预期进行。

问题出在哪里？谢谢。

【问题讨论】：

这些逗号是否应该存在（在background 简写中）？
简而言之，你有 3 个逗号，这使得 4 个背景图像......幸运的是它甚至可以工作......
@Taurus 我希望如此。有两张图片 - 第二张图片用作第一张的叠加层。
是否有任何解决方案适合您？

标签： css shorthand

【解决方案1】：

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

.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 等都是 background 的简写：

url() repeat X%;

【讨论】：