爲什麼jQuery（this）.css（'background-image'）返回瀏覽器URL？

Question

我有三個div如下所示。

<div id="div#product_img_wrapper"> 
    <div id="product_design1" class="timage" style="z-index: 20; background-image: url('');"></div> 
    <div id="product_design2" class="timage" style="z-index: 20; background-image: url('');"></div> 
    <div id="product_design3" class="timage" style="z-index: 20; background-image: url('');"></div> 
</div> 

我使用下面的jquery函數來循環低於divs如下所示。

jQuery('div#product_img_wrapper div').each(function(){ 

      var background = jQuery(this).css('background-image').replace('url(','').replace(')',''); 

      if(background != 'none') 
      { 
       console.log(jQuery(this)); 
       console.log(background); 
      } 


     }); 

輸出

"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1" 
"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1" 
"http://localhost/project/index.php?option=com_project&controller=project&task=project&method=1" 

我想要做的就是讓每個div的背景圖像屬性。但它返回給我這個瀏覽器顯示的URL嗎？上面的代碼有什麼問題？爲什麼jQuery（this）.css（'background-image'）返回瀏覽器URL？

Answer 1

url('')是解析爲「此處」的相對URL。

您正在獲取您指定的URL，只是解析爲絕對形式，而不是您輸入的原始相對形式。

Answer 2

URL是相對的，它被設置爲絕對。

你應該寫這讓背景：

var background = jQuery(this).css('background-image').replace('url(' + location.href,'').replace(')','');