CSS：全尺寸背景图片

试图让全尺寸背景图片：CSS：全尺寸背景图片

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

它显示有正确的宽度，但高度的背景图像被拉伸。我尝试了各种选项，如

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;

}

去除height: 100%

，但没有一次成功。

来源

2012-12-27 Himanshu Yadav

这个CSS当你说拉伸，你的意思是图像的形状失真，或图像的顶部和底部被切关闭？你尝试过哪些浏览器？ –

图像的分辨率是多少？ – Vucko

一个生动的例子会很棒。 – Omega

你的屏幕显然是不同的形状，以你的形象。这并不罕见，即使您的屏幕具有相同的形状（纵横比），您也应该始终迎合这种情况，因为其他人的屏幕并不总是如此。要解决这个问题，您只有以下三种选择之一：

您可以选择完全覆盖图像的屏幕，但不会扭曲图像。在这种情况下，您需要应对图像边缘将被切断的事实。对于这种情况，请使用：background-size: cover
您可以选择确保整个图像可见，而不是扭曲。在这种情况下，您需要警惕一些背景不会被图像覆盖的事实。处理这个问题的最好方法是为页面提供一个坚实的背景，并设计您的图像以淡入实体（尽管这并非总是可行）。对于这种情况，请使用：background-size: contain
您可以选择使用背景覆盖整个屏幕，并使其适合。对于这种情况，请使用：background-size: 100% 100%

来源

2012-12-27 19:06:32

通过限制图像的最小尺寸（例如'min-height：700px;'），您可以部分避免图像宽高比失真。 – ecoe

大部分时间我都使用第一个选项'background-size：cover'和媒体查询，这些查询服务于该图像的不同宽高比。 –

尝试用含有代替盖，然后居中：

background-size: contain; 
background-position: center;

来源

2012-12-27 18:39:26 vGichar

即使我删除这两个属性，它也给了我相同的结果。没有为我工作。我想涵盖完整的背景。 –

你确定图片本身没有拉伸，不管html吗？ – vGichar

检查background-url属性。 –

更好的解决方案可能是使用轻量级的jQuery插件来动态调整浏览器网站的背景大小。我真的很喜欢backstretch.js。他们实施起来非常简单。

来源

2012-12-27 19:14:42 rentageekmom

您应该使用body作为选择器而不是html，这会导致您的标记问题。您的代码如下：

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

我会尝试这样的：

body { 
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed; 
    margin: 0 auto; 
}

你不应该指定图像的尺寸。

来源

2012-12-27 19:19:04 squashriddle

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;

来源

2014-03-04 08:51:21

我有同样的问题，我用body

background: url(image.jpg); 
    background-color: rgba(0, 0, 0, 0); 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
background-color: #0a769d; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
width: 100%; 
background-size: 100% 100%; 
background-position: center; 
max-width: 100%; 
min-width: 100%; 
top: 0; 
left: 0; 
padding: 0; 
margin: 0;

来源

2017-06-21 01:53:22

CSS：全尺寸背景图片

回答

相关问题