CSS 图像大小调整
我有这样的 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>
I have this CSS code:
<style>
body {
position:absolute;
background-image: url(art/c11.jpg);
width:100%;
height:100%;
}
</style>
As I read on the net, I expected that this would resize the background image and fit it to the browser window.
But no. I think I am obviously doing something wrong (I don't know enough CSS). Any tips?
UPDATE:
I add the hole example (not working):
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
添加背景重复属性。
完成的代码应该如下所示：
body { position:absolute; background-image: url(art/c11.jpg); background-size:100%; background-repeat: no-repeat; width:100%; height:100%; }add the background-repeat property.
finished code should look like this:
body { position:absolute; background-image: url(art/c11.jpg); background-size:100%; background-repeat: no-repeat; width:100%; height:100%; }如果您要跨浏览器进行此工作，最好将图像放在页面上，然后将所有内容包装在位于顶部的 DIV 中。例如
CSS
如果您计划支持 IE6，则添加以下代码段：
HTML
正在运行的代码。
If you're going to make this work cross browser, you're better off putting an image on the page and then wrap all your content in a DIV that's laid on top. E.g.
CSS
If you plan on supporting IE6, then add this snippet:
HTML
Code in action.
我认为没有办法使用 CSS 来拉伸或控制背景图像的大小。但是，您可以使用 background-position、background-attachment 和 background-repeat 属性来实现替代结果。
或者您可以使用一些 JavaScript 将图像放入较低的 z-index 图层并将该图层设置为背景，但是这有点黑客攻击
I dont think there is a way to stretch or control the size of a background image using CSS. However, you could use the background-position, background-attachment and background-repeat porperties to achieve an alternative result..
or you may use some JavaScript putting Image into a lower z-index layer and set the layer as you backgournd, however that is a little bit Hacking there
通过使用css3，您可以实现透视图像调整大小，
这适用于所有浏览器和ie9+。
以下过滤器也适用于 ie7 和 ie8。
By using css3 you can achieve perspective image resize,
This works in all browsers and ie9+.
The following filters works in ie7 and ie8 too.
您可以使用
background-size:100%的 CSS3 属性，但对该属性的支持尚未全面，并且无法在较旧的浏览器中工作。为了实现你想要的，你需要一些技巧才能让它发挥作用。有很多这样的博客一个可以向您展示你需要做什么。我不建议这样做，因为如果您有大图像/连接速度慢，您将看到图像加载。如果图像质量不是最好的，那么它在屏幕上或以不同的分辨率拉伸时看起来不会很好。You can use the CSS3 property of
background-size:100%but the support for this property is not across the board yet and won't work in older browsers. To achieve what you want you need a bunch of hacks to get it to work. There are a number of blogs like this one that will show you what you need to do. I don't recommend doing this since if you have a big image/slow connection you will see the image load. If the image isn't the best quality then it won't look good all stretched across a screen or in a different resolution.