css - 多个背景图像，并非全部居中

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/en-US/docs/Web/CSS/background-position

Answer 2

你可以使用background-position属性

background-position: left top, center center;

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

+ background-position +background