将后台 CSS 规则合并为 1 行

Question

如何将以下 CSS 规则合并为 1 行？ 这可能吗？

background-color: #2773bb;
background-position-x: center;
background-position-y: center;
background-size: 16px 16px;
background-repeat: no-repeat;
background-image: url('/Content/img/icons/search.svg');

我一直在玩不同的组合，但似乎都不起作用。 例如，以下内容不会产生所需的结果。

background: url('/Content/img/icons/search.svg') center center 16px 16px no-repeat #2773bb;

也许网上有某种工具，我可以在其中粘贴一堆背景属性，它会为我整合它们？

Answer 1

顺序将是

• 背景图像
• 背景位置
• 背景大小
• 背景重复
• 背景色

堆栈代码段

.main {
  background: url(http://via.placeholder.com/350x150) center center/16px 16px no-repeat #2773bb;
  width: 100px;
  height: 100px;
}

<div class="main"></div>

参考链接

Answer 2

最短的方法是这样，因为背景大小不是背景中的参数。

background: #ffffff url("img_tree.png") no-repeat right top;
background-size: 16px 16px 

尽管如果您有这样的特定规则，可以将它们拆分以获得更好的可读性，并且性能影响几乎不存在