如何在aspx頁面調整身體的背景圖片

我正在搜索這個，並在幾天之後google出來，但沒有得到滿意的解決方案。如何在aspx頁面調整身體的背景圖片

我有一個aspx頁面，body的背景屬性有一個像。圖像尺寸是3000×2000像素。因此，在渲染頁面時，圖像不能正常顯示，並且由於其不能根據窗口大小（或更確切地說是屏幕分辨率）調整自身大小，因此圖像臃腫。如何調整背景圖片大小，使其完全符合瀏覽器窗口大小而不會裁剪或膨脹？

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

任何指針都會非常棒！

來源

2011-06-10 Pronay Sharma

有在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/

希望這會有所幫助:)

編輯：從工作草案更改鏈接到最終版本;）

來源

2011-06-10 11:32:23 Nicholas

background-size是一個CSS3屬性，不適用於舊瀏覽器。有關支持的瀏覽器，請參閱http://www.w3schools.com/css3/css3_pr_background-size.asp。 – dotty 2011-06-10 11:36:13

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

請參閱this SO question它討論的是使圖片拉伸窗口大小的100％。

來源

2011-06-10 11:18:43 dotty

A background-image永不調整。（除非你使用新background-size，which only newer browsers (CSS3) support）

你可以做的是把一個縮放格下方的內容股利和那裏添加您的圖像作爲<img>以適當的比例。

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

來源

2011-06-10 11:21:40 Kissaki

我敢打賭，這可能適合你。我也很難找到這個答案，並遇到此頁 - >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')"; 
}

來源

2012-09-06 14:46:28 gr3en39

如何在aspx頁面調整身體的背景圖片

回答

相關問題