html - 我在使用 CSS 定位大背景图片时遇到问题。包括代码/示例

Question

我正在建立一个网站，当涉及到这个 CSS 的一些更精炼的点时，我一头雾水。解释起来有点复杂，我正在更改的代码可能会影响网站的整个布局。

所以，我设置了一个 dummy site那是我正在查看的内容的精确副本。

问题子项是“关于”页面。

这是它在大多数全尺寸 PC 屏幕上的样子:

这是我们正在研究的“初稿”。在另一个程序中创建，作为最终产品外观的 map 。

理想情况下，我们需要它们看起来一样。在大多数设备上，整面墙(所有的乙烯基字母和奇怪的艺术，一直到地板开始的地方)都需要在黑暗内容区域上方可见。

令我困扰的是 CSS 呈现这张图片的方式。 background-size:cover; 属性让我很适应。这是正在应用的样式。

background-image: url("images/testa333.jpg");
background-position: 50% -29.85px; \*(this is dynamic and changes as you scroll)\*

和

background-attachment: fixed;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
height: 100vh;
overflow: hidden;
position: relative;

我发现不可能在不影响页面其他区域的情况下对其进行操作以使其看起来像我想要的那样。我不确定答案是否在 CSS 中，我是否应该重新调整用作背景的图像的大小，或者什么。

除其他外，我尝试改变图像的大小并将 background-size: cover; 更改为 background-size:contain 但这也会影响布局页面下方的其他图像。

如果您访问我提供的实际网站链接并通过浏览器的控制台编辑一些内容，您将更好地理解我在说什么。

如果 CSS 专家能提供任何帮助，我将不胜感激。

如果在其他地方有明显的答案，我深表歉意；我习惯于处理服务器端的东西和基本的后端 UI。

如果有人需要更多信息，请询问。

谢谢。

Answer 1

您遇到了宽高比问题。让我尝试说明发生了什么，以及一些解决此问题的方法。

---

发生了什么

为了论证，您有一张 200x300 的图片。在您的模拟中，您准确定位所有内容，以便图像适合的位置也是 200x300。一切看起来都很完美，您可以看到整个图像，没有任何裁剪。

当您尝试将图像添加到您的网站时，您会注意到您遇到的问题。您仍然拥有 200x300 的图像，但现在您正试图将其放入 200x250 的区域。这可能会导致一些结果。

1. 您使用 background-size: cover; - 整个容器被填满，但顶部和底部将根据您的 background-position 值进行裁剪。这就是目前正在发生的事情。
2. 您使用 background-size: contain; - 整个容器未填满，但未裁剪任何内容。您将在图像的左侧和右侧看到容器的背景。

---

解决方案

除了您可以在上面做的两件事(这显然不是您想要的)，这些可能有助于为您解决问题。

1. 保持图像所在容器的宽高比。这是最简单的方法。如果您的图片为 200x300，则纵横比为 2:3。确保容器始终具有该纵横比，这样就不会发生裁剪。它可以是 100x150、400x600 或其他尺寸，只要纵横比与图片相同即可。

2. 使用您希望裁剪的图片。这是我会一直建议的，但无论如何都需要一些先见之明来挑选看起来不错的照片。在这个例子中，我会把照片放得更远或加宽，这样你就有一点回旋余地给 background-position: cover 工作。这也适用于移动设备，因为屏幕尺寸会发生变化，而且很难控制纵横比。

3. 使用 background-image:contain，但将边缘淡化到背景中，这样您就看不出图像没有填满屏幕。这并不总是有效，而且看起来它对您的示例无效，但最好记住以防您再次遇到此问题。这为您提供了更多处理图像的空间，如果正确编辑原始图像，它看起来会非常漂亮。

---

希望其中一种解决方案适合您。老实说，让你的容器更高可能是最简单的。不断增加容器的高度，直到裁剪掉边缘而不是顶部和底部。