2013-04-21 55 views
0

我使用JavaScript作为浏览器调整大小来调整一个div,并初步确定其页面加载时。 (是的,我知道它需要正常降级)。我无法通过CSS做这一切的原因是因为与需要被考虑到屏幕的上方一定的高度固定的导航栏。我想调整DIV(和它的渐变背景),以适应浏览器窗口,但是当我更改CSS height属性,它只是削减图像关闭,而不是调整其大小,这意味着页面的下一章节将无法正常过渡。有这个简单的解决办法吗?CSS:调整背景图片,而不是切断

这是我现在使用的CSS:

#homepage_aboutstrip { 
     background-image:url('home/images/gradient-about-background.png'); 
     background-repeat:repeat-x; 
     position:absolute; 
     margin-top:0px; 
     width:100%; 
     height:1050px; 
     z-index:1; 
    } 

并采用IMG标签,而不是背景图像显然会工作,但它不是一个不错的选择。

+1

为什么不使用CSS3渐变? – 2013-04-21 16:58:50

+0

这是更有效的只使用一个轻量级的图像在这种情况下,因为梯度非常仔细地调整了。在一个完美的世界里,我可能会利用这些渐变,但我们有一个坚持的时间表。 ;) – 2013-04-21 17:01:54

回答

3

您可以使用单线CSS做。试试这个,如果它工作,如果它扩展了太多

+1

天使在唱歌,我的朋友。好吧,有点。它不适用于IE8,但至少这是一个步骤。谢谢! – 2013-04-21 16:56:36

+2

http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – cimmanon 2013-04-21 17:04:09

1

它为我在IE7以及

background-image:url('home/images/gradient-about-background.png'); 
background-size: cover 

图像质量可能会受到干扰。

background: url(../img/url.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */