1

好的，所以我是新手。无论浏览器分辨率如何，我都希望我的背景（即图像）适合 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。同样，我是新手，所以请提供一些示例。

4

2 回答 2

8

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

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

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

于 2013-11-18T19:52:56.967 回答
0

实际上，您可以通过插入所需的具有高度和宽度属性的背景图像并在其上设置 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>
于 2013-11-18T19:52:17.867 回答