一些圖片在`background-image:url()` 中不起作用

Question

有些圖像在background-image:url()中不起作用，我不知道我是否需要從圖像名稱中刪除( and )或其他任何問題？

任何幫助將不勝感激。

這是一個工作和不工作的例子。

 <!-- Not Working --> <div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg)"> img </div> <!-- Working --> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>

Answer 1

特殊字符轉義（ \\前面(和) ）在URL中。

 <!-- Use CSS escape character to escape special characters --> <div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-\\(1\\).jpg)"> img </div> <!-- Working --> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

或者，使用單引號（ ' ）將圖像URL括起來：

 <!-- Use single quote (') to enclose image URL --> <div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div> <!-- Working--> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

Answer 2

只需在網址周圍添加單引號即可。 如果URL中包含特殊字符，則應使用引號或轉義字符。 給這個以獲取更多信息的讀取。

 Now Working <div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div> Working <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

Answer 3

嘗試在url添加單引號：

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>

Answer 4

就我而言，我遇到了一些包含單引號的網址的問題。 用"修復了它圍繞 url ：

<div style="background-image: url(&quot; ${url} &quot;);"></div>