某些图片在`background-image:url()`中无法正常工作

Question

在 background-image:url() 中有些图片无法正常显示，我不确定是需要从图片名称中删除 ( 和 ) 还是其他原因导致的问题。

非常感谢任何帮助。

以下是工作和不工作的示例：

<!-- 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>

- Devsi Odedra

---

您可以随时对URL的某些部分进行编码：将(替换为%28，将)替换为%29。 - Sebastian Simon

@SebastianSimon 谢谢，这对我很有用，因为 background-image:url() 是从第三方库动态生成的。 - Devsi Odedra

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>

- fiveelements

Answer 2

只需在url周围添加单引号。如果您的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>

- Javapocalypse

Answer 3

尝试在url中添加单引号：

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

- StepUp

Answer 4

在我的情况下，我遇到了一些包含单引号的网址问题。通过用 " 包围网址来解决：

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

- nikiforovpizza