CSS自动调整背景图片？答案

【问题标题】：CSS autosize background image?CSS自动调整背景图片？
【发布时间】：2014-01-16 19:53:48
【问题描述】：

这可能是本网站上最基本的问题之一，因此我期待一些快速的答案。当我尝试为我的网站设置背景图像时，我会在绘画中编辑图像，并且我必须不断地逐个像素地编辑图像像素，以使图像覆盖网站的每个区域。是否有任何标准或 html 编码可以自动将图像大小调整为网站的确切大小？

【问题讨论】：

标签： html css image background image-size

【解决方案1】：

你熟悉 css 吗？添加背景为图片：

<img src="yoursource.png" class="yourclass" />

并使用这个 css sn-p:

.yourclass {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100; /* puts image into the background */
}

【讨论】：

【解决方案2】：

我假设您在 body 上设置背景图像，但如果不是，您应该这样做。使用background-size: cover; 将拉伸图像以适应

【讨论】：

【解决方案3】：

在您的 CSS 样式表中，您可以使用以下代码（其中 images/bg.jpg 是背景图片的路径）

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于： Safari 3+、Chrome、IE 9+、Opera 10+、Firefox 3.6+

【讨论】：

【解决方案4】：

你需要做这样的事情：

/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
    height: 100%;
}

/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("your_image.jpg");
}

另外，请考虑使用 -moz- 和 -webit- 前缀，以确保它适用于旧版的 webkit 和基于 gecko 的浏览器。

【讨论】：