自動調整身體背景圖像瀏覽器窗口？

我想有縮放到瀏覽器窗口大小身體的背景圖像有一個叫http://www.buildinternet.com/project/supersized/腳本，但我不能夠利用該腳本的縮放，因爲它會影響類IMG不是背景-IMG

任何想法

<script type="text/javascript"> 
$(document).ready(function() { 
$("#BGSelector a").click(function() { 
    var imgLink = $("img", this).attr("src"); 
    $.cookie("html_img", "" + imgLink + "", { path: '', expires: 7 }); 
    var imgCookieLink = $.cookie("html_img");  
    $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 

}); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
     var imgCookieLink = $.cookie("html_img"); 
     $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 

}); 

</script>

來源

2009-07-05 vache

如果我是你，我會追加IMG到DOM。然後將其設置爲絕對定位，並根據客戶端的寬度設置它的寬度。確保其他一切都有更高的Z指數，而你的IMG最低。

來源

2009-07-05 21:33:30 Ali

是的，我知道這條路線，這就是一個大家都在用，但沒有人有在S解決方案背景IMG，主要是因爲背景類是CSS不具有大小真的，但我真的想將調整身體背景的方式 – vache 2009-07-06 01:49:27

您將無法直到advanced background properties in CSS3來得更爲在瀏覽器中的宇宙發揮這樣做跨瀏覽器。最接近阿里已經指定的方式。

如果只有IE瀏覽器，你在乎那麼你可以嘗試自己專有的AlphaImageLoader的CSS濾鏡，例如

#myDiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); }

請注意，雖然，這將是一場浩劫，當人們嘗試點擊與裝載在後臺過濾器鏈接 - 直到你實現了某種形式的解決方法，你將不能夠點擊的鏈接（有幾個在那裏）。

來源

2009-07-06 12:41:12

這就是諷刺的解決方案，其實我並不關心IE可言，全網站是充滿透明PNG，和其他CSS不能在IE瀏覽器上工作，我會直接說我不支持IE瀏覽器，所以它看起來像我將不得不使用另一個div來做到這一點，但我相信有這樣做沒有股利的方式，我不會放棄:)感謝您的建議傑森 – vache 2009-07-06 14:03:58

有你可以去稍微違背關注意識形態分離另一路由但它是可行的。

我知道存在一個圖像組件組件或類似的組件，如果您的網站使用.net編寫，並且幾乎可以確定（但沒有親身經驗）這些程序集必須存在您用於後端的任何其他平臺。

因此可以使用這些根據客戶端重新構圖屏幕尺寸，然後或者使用後端代碼或JS來設置該圖像作爲一個元素的背景圖像。但正如賈森曾經提到的那樣，這種簡單易行的方式需要你等待微軟人士在採用新的css3規則時找到商業用途，然後其餘的市場也隨之出現。

來源

2009-07-06 17:43:17 Ali

感謝信息阿里，我真的很感激，但該網站是PHP，WordPress的是精確的，我真的不擔心IE瀏覽器或微軟，我只是不製作網站時支持他們，我的理由很簡單，我做了一個網站，提供服務，如果服務requirers IE瀏覽器沒有比請用更現代的瀏覽器如Safari瀏覽器火狐歌劇的一個支持組件，用戶可以使用其他瀏覽器和網頁設計師沒有問題/程序員應該啊，我會支持這一趨勢 – vache 2009-07-07 14:33:39

您是否想過使用畫布？好吧，我必須承認幾乎不知道使用畫布的任何事情（我剛開始學習它），下面的示例可能完全錯誤，但它可行（Chrome瀏覽器，而不是IE）。它甚至可以調整瀏覽器。

<canvas id="myCanvas" style="width:100%;height:100%;position:absolute;left:0px;top:0px;;z-index:-1;"></canvas> 
<script type="text/javascript"> 
var elem = document.getElementById('myCanvas'); 
var context = elem.getContext('2d'); 
var w = document.body.clientWidth; 
var h = document.body.clientHeight; 
img = new Image(); 
img.src='bg.jpg'; 
img.onload = function() { 
context.drawImage(this,0,0,300,150); 
}; 
</script>

注意的的drawImage大小必須在本例中爲300x150的默認畫布大小

來源

2009-08-16 00:36:56 Mottie

嘗試使用帆布感謝您的想法，但是，是畫布是一個HTML5組件所以它不是目前最實用的解決方案 – vache 2009-08-16 14:42:59

自動調整身體背景圖像瀏覽器窗口？

回答

相關問題