2011-06-10 51 views
3

我正在搜索这个,并在几天之后google出来,但没有得到满意的解决方案。如何在aspx页面调整身体的背景图片

我有一个aspx页面,body的背景属性有一个像。图像尺寸是3000×2000像素。因此,在渲染页面时,图像不能正常显示,并且由于其不能根据窗口大小(或更确切地说是屏幕分辨率)调整自身大小,因此图像臃肿。 如何调整背景图片大小,使其完全符合浏览器窗口大小而不会裁剪或膨胀?

可以完成设置CSS或使用jquery/javascript。

任何指针都会非常棒!

回答

2

有在CSS3背景的所谓“背景大小”

试试这个新的属性:

<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> 

你可以找到这里的CSS背景属性的详细信息: http://www.w3.org/TR/css3-background/

希望这会有所帮助:)

编辑:从工作草案更改链接到最终版本;)

+0

background-size是一个CSS3属性,不适用于旧浏览器。有关支持的浏览器,请参阅http://www.w3schools.com/css3/css3_pr_background-size.asp。 – dotty 2011-06-10 11:36:13

+0

感谢您的支持......它以我想要的方式工作! :) – 2011-06-14 03:29:18

0

A background-image永不调整。 (除非你使用新background-sizewhich only newer browsers (CSS3) support

你可以做的是把一个缩放格下方的内容股利和那里添加您的图像作为<img>以适当的比例。

<div style="position:absolute; background:#cccccc; width:100%; height:40px;">bg</div> 
<div style="position:absolute;">content</div> 
3

我敢打赌,这可能适合你。 我也很难找到这个答案,并遇到此页 - >css-tricks.com

然后,我试图使用在页面上提供的代码,它的工作完美。 :)。

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')"; 
}