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

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

2 个答案: