9

我想让一张图片成为网站的完整背景！我知道这听起来很简单，但它让我发疯了，它不适合页面，这是我最后一次尝试！

CSS：

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

我也在使用 Twitter Bootstrap，但即使没有它，我也无法正确使用它！

任何帮助，将不胜感激。

编辑：我没有使用精确的像素，因为我正在尝试制作响应式 + 移动设计。

我不知道他们为什么拒绝这个问题！但这就是我解决它的方法！

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
4

4 回答 4

13

编辑：我创建了一个演示，删除了一些不必要的东西。这样做的好处是不打开背景图片。DEMO可以工作，但没有像下面引用的代码那样经过广泛的测试。

我最近在一个项目中工作，我们需要这个确切的东西。我是从我的项目文件中发布的，所以其中一些可能是不必要的，因为它是一个团队成员写的。

首先设置 html 和 body 的属性。然后，我在主体内部有一个名为背景的根 div。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

同样，我确信其中一些是不必要的，但我希望它有所帮助。

于 2013-06-12T18:09:46.763 回答
6

您可以通过添加属性来做到这一点background-attachment: fixed;

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

演示

但是你必须知道，如果页面尺寸和图像尺寸的比例不同，则可以在窗口中切割图像。

编辑

如果对您来说身高更重要，请将参数更改backround-size为containt：

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

包含演示

于 2013-06-12T17:20:53.540 回答
0

您需要设置页面第一个元素的高度。

html, body { margin:0; height: 100%;}
于 2013-06-12T17:23:47.677 回答
0

为什么不将img's导入Flash（Microsoft程序）并将img's转换为Vector IMG's（Vector：在更改高度和宽度时不会影响质量的图像（一样多）。）对矢量img进行调整后（更改img 到您当前平台的分辨率）保存并将其应用于您的 HTML。我建议制作一个备份副本，特别是如果您跨平台使用 HTML 以获得不同的分辨率。

于 2014-02-21T06:14:25.020 回答