html - CSS Desktop vs Mobile 保持背景图像可见

Question

我有以下网站:

www.thewhozoo.com

当从宽度超过 1240 像素的屏幕上查看时，它会并排显示图像。对于 1240px 以下的屏幕(例如手机)，它会显示图像并显示在彼此下方。这是通过以下方式实现的:

@media only screen and (max-width: 1240px) {

一切正常。

但是我的问题是背景图片:

.top-container {
    float: left;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

当浏览器足够宽时(例如此处为 930px)，它会显示:

但使用较窄的浏览器(例如此处为 480px)或移动设备，它会显示:

如您所见，在图像中，背景工作“WORK”在第二个屏幕中被截断。

问题

是否可以在 css 中设置最小宽度，以便无论浏览器大小如何，“WORK”一词始终可见？

这会给较小的浏览器带来一种效果，就好像它们从更远的地方(缩小)查看页面一样。

谢谢。

Answer 1

background-size: cover 设置确保整个元素始终由背景图像填充。在您的情况下，移动版本显示图像的完整高度并将其水平居中，这样可以在左右两侧切掉一些东西。如果您将其显示得更小(这对于看到整个“工作”一词是必要的)，高度也会缩小，图像将不再填满窗口。

您可以尝试使用 background-size: contain，它将始终显示整个图像，但会根据方向在顶部和底部或左侧和右侧留下空白区域。但结合背景颜色，这可能是您可以接受的。