用javascript設置背景圖像

在Chrome，safari和opera中將背景圖像設置爲絕對引用，例如：「/images/image.png」將其更改爲「http://sitepath/images/image.png」。用javascript設置背景圖像

它不會在Firefox中這樣做。

有什麼辦法可以避免這種行爲，或者是否寫入瀏覽器的javascript引擎？使用jquery設置背景圖像也會造成這個問題。

問題是，我張貼的HTML腳本需要在這種特定格式的URL的PHP腳本。我知道設置圖像路徑相對修復了這個問題，但我無法做到這一點。

唯一的另一種選擇是使用正則表達式。轉換網址。

謝謝。

測試此在Firefox和Chrome/WebKit瀏覽器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div style="height:400px;width:400px;background-image:url(/images/images/logo.gif);"> 
</div> 
<br /> 
<br /> 
<div id="test" style="height:400px;width:400px;"> 
</div> 
<script type="text/javascript" src="/javascripts/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#test").css('background-image',"url(/images/images/logo.gif)"); 
     alert(document.getElementById('test').style.backgroundImage); 
    }); 
</script> 
</body> 
</html>

來源

2010-05-01 Mattoe3k

就個人而言，我不會試圖依靠首先是這樣的。我嘗試了4個瀏覽器，並且他們都給出了稍微不同的結果。 – goat 2010-05-01 16:46:18

不知道你exacly如何把這個位置到文檔中，但可以使用window.location.hostname獲得理想的域名和前置一個。

var bgImg = window.location.hostname + '/images/images/logo.gif'; 
$("#test").css('background-image', 'url('+bgImg+')');

你將取代/images/images/logo.gif用，但是你生成圖像（服務器端，我猜？）

來源

2010-05-01 16:46:36 DisgruntledGoat

一個更好的辦法是改變對項目的類，新的類改變了圖像無論你想要什麼。例如：

$("#test").addClass("newClass");

這是一種更簡潔的方法，它會更好地降級並允許正確分離關注點。

如果你必須堅持改變內聯CSS，你必須使用絕對引用來保持它在所有瀏覽器中都是一樣的。

$("#test").css("background", "url(" + window.location.hostname + "/logo.gif)");

來源

2010-05-01 17:01:51 sohtimsso1970

需要'）在url – CoR 2013-06-04 12:49:14

謝謝，我修好了。 – sohtimsso1970 2013-06-04 12:55:09

這真的是更好的解決方案，因爲它不僅可以避免相對路徑和絕對路徑的問題，而且可以更好地分離問題。 – lanoxx 2013-07-19 13:14:30

-1

$('#divID').css("background-image", "url(/myimage.jpg)");

來源

2014-07-11 15:20:50

用javascript設置背景圖像

回答

相關問題