CSS 背景适合每个分辨率

Question

好的，所以我是新手。我希望我的背景（即图像）适合 Web 浏览器的每个分辨率，无论浏览器分辨率如何。我发现了这个技巧：

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;
}

但它所做的只是使背景适合显示器的完整尺寸，而不是浏览器。因此，如果显示器为 1366x768 并且浏览器已最大化，那么背景将正确显示为“满的”。但是，如果我再调整浏览器，背景图像将无法正确显示。

那我需要怎么做，所以背景图片是用浏览器调整的？因此，如果浏览器为 1300x700，则背景图像为 1300x700，但如果浏览器为 900x600，则背景图像为 900x600。同样，我是新手，所以请提供一些示例。

Answer 1

实际上，您可以通过插入所需的具有高度和宽度属性的背景图像并在其上设置 100% 宽度来解决此问题。然后您可以将您的内容放在该图像之上。

<div class="container">
    <img class="background-image" src="whatever.png" width="NATURAL WIDTH" height="NATURAL HEIGHT">
    <div class="content">
        This stuff will be on top of the image.
    </div>
</div>

<style>
    /* This element will == the height of the image */
    .container {
        position: relative;
    }

    /* This element is the background image */
    .background-image {
        width: 100%;
        height: auto;
        position: static;
    }

    /* This element contains the content which will be placed on top of the background image */
    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
</style>

Answer 2

cover 该关键字指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

contain 该关键字指定背景图片在保证两个尺寸都小于或等于背景定位区域对应尺寸的情况下，应该尽可能的放大。所以尝试使用包含而不是覆盖

100% 这将 100% 缩放到高度和宽度，而不会进行任何裁剪。

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

这可能会对您有所帮助：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

还有这个https://developer.mozilla.org/en-US/docs/Web/CSS/background-size