CSS 背景图片 - 如何设置图片停留在原位答案

【问题标题】：CSS Background Images - How to set up images stay in the positionCSS 背景图片 - 如何设置图片停留在原位
【发布时间】：2020-06-20 22:10:23
【问题描述】：

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

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

【问题讨论】：

尝试 background-size:50% 100% 或 background-size:50% auto
感谢您的回复，但他们都没有工作。

标签： css image background

【解决方案1】：

您应该在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 网络文档中阅读更多内容并试用该属性：

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

【讨论】：

【解决方案2】：

您可能必须将每个图像单独设置为“宽度：50vw；”无论窗口大小如何，这将使它们中的每一个都占据视口的 50%。所以当窗口增加或减少时，它们应该各自动态变化并调整相同的大小。

【讨论】：