CSS桌面VS移动保持的背景图像可见

-1

www.thewhozoo.com

当从屏幕的比1240px以上的宽度看时，它通过侧显示图像侧。屏幕低于1240像素（例如手机）时，它会将图像显示在彼此之下。这是通过使用：

@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中，设置的最小宽度，使字“工作”将始终可见，无论浏览器的大小？

，就好像它们是从较远的观看页面这将给较小的浏览器的影响（缩小）。

谢谢。

来源

2017-06-13 Richard

我想CSS来'最小width'存在的背景图像的DIV，虽然我不知道......你尝试过什么？ –

@RandomDeveloper不可以，没有这样的背景属性 – LGSon

我们无法解析整个网站，所以请添加一个最小工作代码片段。 – LGSon

的background-size: cover设置可确保整个元素总是被背景图像填充。在你的情况下，移动版本显示图像的完整高度并将其居中放置，这样就可以在左侧和右侧切断某些东西。如果你将它显示得更小（这将是必要的，看到整个单词“工作”），高度也会缩小，图像不会再填满窗口。

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

来源

2017-06-13 22:03:45 Johannes

谢谢。包含'作品。我只需要调整图像以适应较小的屏幕。 – Richard

尝试background-size: 100% 100%，或者background-size: 100%

希望这有助于！

来源

2017-06-13 22:01:21 Chesswithsean

你可以做的是使背景图像的两个副本，当浏览器被调整到最小宽度，你可以使用JavaScript（jQuery的）背景图像交换由大至小的版本。

或者你可以像样式的背景：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;

来源

2017-06-13 22:04:14

CSS桌面VS移动保持的背景图像可见

回答

相关问题