当它们是内容时,我可以缩放图像以填充窗口,如下所示: (没有任何html5或div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
和
<img src="wacard.png" alt="original image" title="">
但
这失败了(“html,body”和“body”)
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
和
<body
style="background-image: url(wacard.png);">
</body>
拾起从这里拾起:Resize HTML5 canvas to fit window但据我所知,那必须有一些比我知道的更奇特的代码,继续,......或者我做错了什么......
如何才能获得背景图像? (理想情况下,没有javascript)
答案 0 :(得分:8)
这是一个很好的教程,有几个解决方案: http://css-tricks.com/perfect-full-page-background-image/ 完成演示和分步编码过程。
提到的HTML5方式是:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
文章中提到了一个ie修复。
答案 1 :(得分:1)
据我了解,您想要创建一个完整页面重新调整大小的背景。如果是这样,请按照此处的说明操作=&gt; http://css-tricks.com/perfect-full-page-background-image/
答案 2 :(得分:0)
还考虑进一步审查和选项,如我的情况,
的价值background-position:
设置选项......
http://developer.mozilla.org/en-US/docs/Web/CSS/background-position
以及
background-origin:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
伴随backbackground-image CSS样式设置。
答案 3 :(得分:0)
模仿,并添加了背景图片
例如background: url(back.jpg) fixed;
使它缩放所需的全部是
background-size: cover;
少就是多。 ;)