2011-04-19 112 views
1

我想在iframe中嵌入圖像,其大小不確定。 我試着如下,但它似乎並沒有工作。
請讓我知道如何繼續。身體自動調整大小的css圖像背景

我真正想要做的是,圖像應該自動適合頁面。圖像比頁面小,所以當我刪除不重複的圖像的多個實例都可以在屏幕上看到。

請幫忙謝謝。

body{ 
      background-image:url(someimageurl); 
      width:1400px; 
      height:1600px; 
      background-repeat:no-repeat; 

     } 
+1

將寬度和高度設置爲100%的''如何?你真的想用CSS來做嗎? – 2011-04-19 12:02:17

回答

3

羅丹是支持正確的軌道。在純CSS中,你只能使用CSS3來完成,而只有最新版本的瀏覽器才能工作。但是,您可以通過將絕對定位的圖像放在頁面的角落並將寬度和高度設置爲100%來僞造它。然後一些z-index工作將內容放在圖像的頂部。

的HTML:

<img class="background" /> 
<div class="wrapper"> 
content goes here 
</div> 

的CSS:

img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index} 
div.wrapper{position:relative;z-index:1;} 

見這裏 - http://jsfiddle.net/snkg8/ 僅供參考 - 在IE6沒有一些額外的CSS黑客這是不行的,但我不麻煩IE6了。

2

您有後臺大小CSS屬性:

background-size: 100%; 

不幸的是,這是一個CSS3屬性,只有在最新的瀏覽器(IE9,Firefox4)

0

通過使用CSS3,

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

這適用於所有的瀏覽器和IE9 +。 以下過濾器也適用於ie7和ie8。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";