多个背景图片，并非全部居中

Question

我正在尝试使用CSS将多个背景图像添加到DOM元素（td）。 我可以指定多个彼此重叠的背景图像，如下所示：

td{
    background-image: url("img1.svg"), url("img2.svg");
}

这导致img2堆叠在img1的顶部。 但是，我需要指定一个背景图像应偏离中心，而另一背景应居中。 有没有办法在CSS中做到这一点，还是我需要花哨的时间来做到这一点？

Answer 1

您只需对排名规则执行相同的操作：

td{
    background-image: url("img1.svg"), url("img2.svg");
    background-position: center center, left top;  /* or */
    background-position: center center, 0px 0px;   /* x y */
}

第一个应用于第一个图像，第二个应用于第二个图像，依此类推。

更多细节：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

Answer 2

您可以使用background-position属性

background-position: left top, center center;

如果不想少键入，可以使用background速记属性。 我真的更喜欢速记。

+ background-position + background