Question

我有这个CSS代码：

<style>
     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     width:100%;
     height:100%;
     }
</style>

正如我在网上看到的那样，我希望这会调整背景图像的大小并使其适合浏览器窗口。

但不是。我想我显然做错了（我不太了解CSS）。有什么提示吗？

更新：

我添加了洞例子（不工作）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
     body {
     position:absolute;
     background-image:url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }
</style>
</head>
<body >
</body>
</html>

Answer 1

添加background-repeat属性。

完成的代码应如下所示：

     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }

Answer 2

我认为没有办法使用CSS拉伸或控制背景图像的大小。但是，您可以使用背景位置，背景附件和背景重复属性来实现替代结果。

或者您可以使用一些JavaScript将图像放入较低的z-index图层并在背景中设置图层，但这有点像黑客那样

Answer 3

如果您打算跨浏览器进行此项工作，最好在页面上放置一个图像，然后将所有内容包装在放在顶部的DIV中。 E.g。

<强> CSS

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  z-index: 1;
}

如果您打算支持IE6，请添加以下代码段：

<!--[if IE 6]>
  <style type="text/css">
    html {
      overflow-y: hidden;
    }

    body {
      overflow-y: auto;
    }

    #background {
      position:absolute;
      z-index:-1;
    }

    #content {
      position:static;
    }
  </style>
<![endif]-->

<强> HTML

<img id="background" src="art/c11.jpg" alt="" />

<div id="content">
  Your content
</div>

Code in action.

Answer 4

通过使用css3，您可以实现透视图像调整大小，

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

这适用于所有浏览器和ie9 +。以下过滤器也适用于ie7和ie8。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

Answer 5

您可以使用background-size:100%的CSS3属性，但此属性的支持尚未全面支持，并且在旧版浏览器中无法使用。为了达到你想要的效果，你需要一堆黑客才能让它发挥作用。有许多像这样的one博客会告诉你你需要做什么。我不建议这样做，因为如果你有一个大的图像/慢连接，你会看到图像加载。如果图像质量不是最好的话，那么无论是在屏幕上还是在不同的分辨率下，它都不会看起来很好。

CSS图像大小调整

5 个答案: