在firefox中將背景拉伸至100％

我目前正在使用JavaScript背景腳本來更改計時器上的背景，並且參考白天和黑夜這個效果很好，但我試圖將背景拉伸至100％瀏覽器的寬度，我已經通過CSS完成了。它在safari和chrome中工作，但不是firefox（可能也是IE），它將100％視爲以100％的尺寸顯示圖像，任何人都可以幫忙嗎？在firefox中將背景拉伸至100％

我不確定是否有黑客與身體一起工作，或者我不得不將JavaScript重寫爲div或其他東西，但不知道如何，所以任何幫助表示讚賞！

的JavaScript

<script language="JavaScript1.2"> 

//Specify background images to slide 
var bgslides=new Array() 

var currentTime = new Date().getHours(); 
if (9 <= currentTime && currentTime < 18) { 
    bgslides[0]="images/webcam1.jpg" 
    bgslides[1]="images/webcam2.jpg" 
    bgslides[2]="images/webcam3.jpg" 
} 
else 
{ 
    bgslides[0]="images/webcamnight.jpg" 
    bgslides[1]="images/webcamnight.jpg" 
    bgslides[2]="images/webcamnight.jpg" 
} 

//Specify interval between slide (in miliseconds) 
var speed=5000 

//preload images 
var processed=new Array() 
for (i=0;i<bgslides.length;i++){ 
processed[i]=new Image() 
processed[i].src=bgslides[i] 
} 

var inc=-1 

function slideback(){ 
if (inc<bgslides.length-1) 
inc++ 
else 
inc=0 
document.body.background=processed[inc].src 
} 

if (document.all||document.getElementById) 
window.onload=new Function('setInterval("slideback()",speed)') 
window.onload=new Function('setInterval("slideback()",speed)') 

</script>

和CSS

body{ 

background-position: 0 0; 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: 100% 


}

來源

2011-03-17 Amy

background-size: 100% 100%; /* w3 spec - no browser supports it yet */ 
-moz-background-size: 100% 100%; /* used for firefox */ 
-o-background-size: 100% 100%; /* used for opera */ 
-webkit-background-size: 100% 100%; /* used for safari and chrome */

來源

2011-03-17 08:34:12 user631906

試過之前，只是沒有再次，不工作，不知道爲什麼，我知道這是標準的黑客，我不知道如果它在身體標記是interfearing ... – Amy 2011-03-17 08:37:32

雖然這種屬性在壁虎1.9.2（火狐3.6）是新的，所以可以在完全伸展一個圖像Firefox 3.5中使用-moz-border-image的背景。

.foo { 
      background-image: url(bg-image.png); 

      -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
      -webkit-background-size: 100% 100%;  /* Safari 3.0 */ 
      background-size: 100% 100%;    /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

      -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ 
    }

您也可以嘗試假拉伸背景：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html> 
     <head> 
      <title>Stretched image in background</title> 

      <style type="text/css"> 
       body, html { margin: 0; padding: 0 } 
       #bgimg { position:absolute; z-index:-1; width:100%; height:100% } 
      </style> 

     </head> 
     <body> 

     <img id="bgimg" src="http://www.lcvm.nl/images/nieuwsbrief/illusie2.gif" /> 
     <!-- content will go here --> 

     </body> 
    </html>

通過DOM的方式，你可以改變IMG。

來源

2011-03-17 08:38:03 nrii

不起作用，我不知道是否因爲我不指定在CSS的背景也許？它在JavaScript函數中。 – Amy 2011-03-17 08:44:10

你可以嘗試假冒伸展背景。我將用一個例子編輯anwser。 – nrii 2011-03-17 08:50:49

只是延伸頁面上的所有圖像？ – Amy 2011-03-17 09:06:06

嘗試使用：

background-size: cover;

或

background-size: 100% cover;

來源

2012-01-25 11:36:01

在firefox中將背景拉伸至100％

回答

相關問題