Html 如何在aspx页面中调整body背景图片的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6305555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to resize background image of body in aspx page
提问by Pronay Sharma
I am searching this and googling out since quite a few days now, but not getting satisfactory solution.
几天以来，我一直在搜索并使用谷歌搜索，但没有得到令人满意的解决方案。
I have an aspx page, the background property of the body has an image like . The image size is 3000 X 2000 px. So when rendering the page, the image is not coming properly and is bloated because its not resizing itself according to the size of the window (or more precisely the resolution of the screen). How can I resize the background image so that it fits in exactly as per the browser window size without cropping or bloating?
我有一个 aspx 页面，body 的背景属性有一个像 . 图像大小为 3000 X 2000 像素。因此，在渲染页面时，图像无法正常显示并且变得臃肿，因为它没有根据窗口的大小（或更准确地说是屏幕的分辨率）调整自身大小。如何调整背景图像的大小，使其完全符合浏览器窗口大小而不会裁剪或膨胀？
Can it be done setting the CSS or using jquery/javascript.
可以通过设置 CSS 或使用 jquery/javascript 来完成吗？
Any pointers would be very great!!!
任何指针都会非常棒！！！
采纳答案by Nicholas
There is a new property for backgrounds in CSS3 called "background-size"
CSS3 中有一个新的背景属性叫做“background-size”
Try this:
尝试这个：
<html>
<head>
<title>Background-Image Test</title>
<style>
body {
background-image: url(./3840x1200.jpg);
background-size: 100%;
background-origin: content;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- your content here -->
</body>
</html>
You can find more informations about the CSS background properties here: http://www.w3.org/TR/css3-background/
您可以在此处找到有关 CSS 背景属性的更多信息：http: //www.w3.org/TR/css3-background/
Hope this helps :)
希望这可以帮助 ：）
Edit: Changed Link from working draft to final version ;)
编辑：将链接从工作草案更改为最终版本；)
回答by gr3en39
I bet this might work for you. I was having a hard time looking for answers for this too and came across this page -> css-tricks.com
我打赌这可能对你有用。我也很难找到这个问题的答案并遇到了这个页面 -> css-tricks.com
I then tried to use the code provided on the page and it worked perfectly. :).
然后我尝试使用页面上提供的代码，它运行良好。:)。
html {
background: url(images/green_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
回答by dotty
See this SO questionit talks about making a picture stretch 100% the size of the window.
看到这个 SO 问题，它谈到了使图片拉伸 100% 的窗口大小。
回答by Kissaki
A background-imagenever resizes. (Unless you're using the new background-size, which only newer browsers (CSS3) support)
Abackground-image从不调整大小。（除非您使用新的background-size，只有较新的浏览器（CSS3）支持）
What you can do is put a scaling div below your content-div and add your image there as an <img>with proper scaling.
您可以做的是在内容 div 下方放置一个缩放 div，并将您的图像添加为<img>具有适当缩放比例的图像。
<div style="position:absolute; background:#cccccc; width:100%; height:40px;">bg</div>
<div style="position:absolute;">content</div>
