如何在没有滚动条的情况下实现在IE8中工作的全页背景
如何在没有滚动条的情况下实现在IE8中工作的全页背景
提问于 2013-09-05 08:29:57
我不能删除一个网站上的滚动条，并保留一个完整的页面背景web site i am working on我不想减少图像的高度，并在底部留下一个没有背景的小条带。如何在没有滚动条的情况下实现在IE8中工作的全页背景？
<!doctype html>
<html>
<style>
html, body {
margin: 0px;
padding: 0px;
border: 0px;
height:100%;
width:100%
}
body{background-size: 100%;}
@font-face
{
font-family: myFirstFont;
src: url(pachs___.ttf);
}
img.stretch {
width:100%;
height:100%;}
div.wholepage{width:100%; height:100%;border-style:solid; border-width:0px;padding:0px;}
</style>
<body>
<div class="wholepage">
<img src="images\parchment.png" class="stretch">
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2013-09-05 08:45:11
如果您不需要滚动条，可以将OVERFLOW: HIDDEN;添加到body & html中，或者可以确保body的内容是绝对定位的，从而使body不继承高度。
html, body {
margin: 0px;
padding: 0px;
border: 0px;
height:100%;
width:100%
overflow: hidden;
}你不能在IE8中使用背景大小，因为它不受支持，CSS3PIE支持它，但它仍然是一个javascript解决方案，所以我还是坚持使用简单的javascript。
在css中，这是我们最初必须做的，这可能只在附加了过滤器的IE8中工作，但是为了确定，我会坚持使用javascript。
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;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}这是一个可行的解决方案。
HTML：
<img src="images/bg.jpg" id="bg" alt="">CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }JAVASCRIPT:
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg.removeClass().addClass('bgheight');
} else {
$bg.removeClass().addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});演示： http://jsfiddle.net/DUEsh/
在IE7+中工作(可能使用固定位置填充程序进入IE6 )
Stack Overflow用户
发布于 2013-09-05 08:48:44
如果你永远不想要滚动条，你可以在正文中添加overflow: hidden；
html, body {
margin: 0px;
padding: 0px;
border: 0px;
height:100%;
width:100%
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18625908
复制相关文章
相似问题
腾讯云开发者
