Question

我有一张地图图片，我想用它作为我网站的背景。我希望它覆盖整个背景（没有空格，没有滚动条 - 大部分时间，以后更多）。但是，由于我打算将其与其他信息叠加在一起，因此我希望永远不会裁剪地图的一部分。

我尝试过以下css：

html {
    background: url('../images/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

可在此fiddle中看到。我要保留的部分是图像右侧的大黄色部分。

这很适合在大部分时间内将背景图像的部分保留在框架中，但是当窗口调整为非常短或非常宽时，它仍会被剪切掉。在这种情况下，我希望引入滚动条，以便仍然可以看到整个“焦点”。

我知道这是一个很好的利基，但我想知道是否有人能看到这样做的一种巧妙的方式？

Answer 1

如果您知道背景图片的大小，请设置min-witdh和min-height。

html{
    background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ; 
    min-width:1000px;
    min-height:300px;
}

Updated Fiddle

Answer 2

将背景图像放在容器中，并为其指定最小宽度和高度，并将溢出设置为自动。因此，当浏览器的大小强制容器小于您的容量时，会出现滚动条，允许用户平移地图。

<div class="map"></div>

和你的CSS：

div.map {
  background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100%;
  overflow: auto;    <-- this will enable scrollbars on overflow
  min-height: 400px; <-- adjust this to taste
  min-width: 400px;  <-- and this
}

body {
  margin: 0;
  padding: 0;
}

在这里更新你的小提琴： http://jsfiddle.net/xkcsu5st/2/

你总是可以通过一些脚本来增加它来控制地图的滚动位置，这样你想要的部分总是在视野中。

Answer 3

这是一个用图像代替背景图像的jQuery库：

https://github.com/jonom/jquery-focuspoint

它可能不是最好的答案，但它似乎是现在。我会发布另一个答案，如果我有一个，我认为可能有一个更好的方式，我正在研究的目标:)！

与焦点的背景图象

3 个答案: