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

封面此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。

包含此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。所以尝试使用contains而不是cover

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

Answer 2

您可以通过在其上插入所需的背景图像并使用高度和宽度属性并在其上设置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>

CSS背景适合每个分辨率

2 个答案: