css - 将背景 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>

Reference Link