某些图像在“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>

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 两边添加单引号即可。如果 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>