CSS Background Images - 如何设置图片停留位置

Question

我在展示柜上并排设置了两张背景图片。当我在全屏上看到它时看起来不错，但是当我通过移动网络浏览器更改屏幕大小时，左侧的图像覆盖在右侧的图像上......所以我想知道如何将两个图像设置为同等移动。（意思是平均改变图片的大小，不是左边的超过右边的图片）非常感谢你的帮助。

#showcase{
    min-height: 400px;
    background: url("../IMGS/showcase.jpg") left no-repeat, url("../IMGS/showcase2.jpg") right no-repeat;
    padding: 15px;
}

Answer 1

您可能需要将每张图片单独设置样式为“宽度：50vw；”这将使它们中的每一个都占据视口的 50%，而不管 window 的大小。因此，当 window 增加或减少时，它们应该各自动态变化并调整相同的大小。

Answer 2

您应该在 background-position 属性之后添加 / 50%，在本例中是 left 或 right 用于任一图像。

可以看到css块如下：

#showcase{
    min-height: 400px;
    background: url("../IMGS/showcase.jpg") left / 50% no-repeat, url("../IMGS/showcase2.jpg") right / 50% no-repeat;
    padding: 15px;
}

您可以在 MDN Web 文档中阅读更多内容并使用属性进行试验：

https://developer.mozilla.org/en-US/docs/Web/CSS/background

CSS Background Images - 如何设置图片停留位置

CSS Background Images - How to set up images stay in the position

css

background

image