CSS：全尺寸背景图像 [英] CSS: Full Size background image

问题描述

尝试使用以下方式获取完整大小的背景图片：

Trying to get full size background image with:

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

它显示背景图片宽度正确，
我尝试了各种选项，例如

It's showing the background image with correct width but height gets stretched. I tried various options like

html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;

}

c> height：100％

removing height: 100%

但没有任何工作。

推荐答案

你的屏幕显然是一个不同于你的图像的形状。这是不常见的，你应该总是迎合这种情况下，即使你的屏幕是相同的形状（长宽比），因为其他人的屏幕不会总是。要处理这个问题，您只有三个选项之一：

Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:

• 您可以选择用图像完全覆盖屏幕，图片。在这种情况下，您将需要处理图像的边缘将被剪切的事实。对于这种情况，请使用： background-size：cover


• 您可以选择确保整个图像是可见的， 。在这种情况下，您需要处理的事实，一些背景不会被你的图像覆盖。处理这个的最好的方法是给页面一个坚实的背景，并设计你的图像褪色为实体（虽然这并不总是可能）。对于这种情况，请使用： background-size：contains


• 您可以选择用背景覆盖整个屏幕，适合。对于这种情况，请使用： background-size：100％100％

• You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
• You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
• You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%

这篇关于CSS：全尺寸背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！