0

现在，当您转到此链接时：http ://rawgallery.us/user/login 后台被切断。无论浏览器窗口的分辨率如何，它都应该像这张图片：http ://rawgallery.us/CarlisleBackDropWallRoom.png

我还在学习 CSS，所以我使用了这段代码，它应该覆盖所有的背景，它有效：

html { 
  background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我的#page 设置如下：

#page {
  margin-left: auto;
  margin-right: auto;
  min-height:960px;
  min-width:960px;
  max-height:1200px;
  max-width:1200px;

}

html 标签会覆盖页面标签吗？

例如，如果浏览器窗口为 500x700 或 1200x1500，有人可以告诉我如何查看整个背景图像吗？

谢谢！

4

1 回答 1

0

您可能更喜欢background-size:contain，它将背景图像放入其容器中，而不是试图同时覆盖容器的宽度和高度。

来自MDN 文档：

["contain"] 指定背景图片在保证两个尺寸都小于或等于背景定位区域对应尺寸的情况下，应该尽可能的放大。

这是CSS：

html { 
  background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}


这是一个工作示例。

请注意浏览器的兼容性background-size。

于 2013-10-16T20:04:20.200 回答