CSS 图片调整大小

Question

CSS 图片调整大小

3

我有这段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>

- mRt

你为什么要定位你的body元素？这并不是必要的，但通常最好将body的margin和padding设置为0。这可以使一些浏览器的默认值规范化。 - jasongetsdown

5个回答

2

如果你想让这个功能在不同的浏览器中正常工作，最好在页面上放置一张图片，然后将所有内容包裹在一个覆盖在图片上的DIV中。例如：

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>

实际代码演示。

- Gert Grenander

2

通过使用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')";

- Gopalch

2

我认为没有办法使用CSS来拉伸或控制背景图片的大小。但是，您可以使用background-position，background-attachment和background-repeat属性来实现替代结果。

或者，您可以使用一些JavaScript将图像放入较低的z-index层并将该层设置为您的背景，但这有点不太正规。

- D.J

1

您可以使用CSS3属性background-size:100%，但是该属性的支持尚未普及，并且在旧浏览器中无法正常工作。为了实现您想要的效果，您需要一堆技巧来使其正常工作。有许多博客（例如one）会向您展示所需的操作。我不建议这样做，因为如果您有一个大图像/慢连接，您将看到图像加载。如果图像质量不佳，则在屏幕上或在不同分辨率下拉伸时不会显示良好。

- amurra

我不知道为什么，但是这些例子都对我不起作用... 不管怎样，还是谢谢。 - mRt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Conceited Code · Accepted Answer

添加background-repeat属性。

最终的代码应该像这样:

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