在CSS中添加来自长URL的背景图像

Question

我想尝试通过URL添加背景图像但是图像没有显示。 我在这里使用的是什么。

    <div style="background-image:url(https://i.amz.mshcdn.com/pr8NZRyZf0Kmz4FSGMkLtxUwZ70=/575x323/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fstory%2Fthumbnail%2F65469%2F23ede933-7d84-40fb-a9ee-eb7787a3feac.jpg);">content goes here...</div>

我检查了网址是否有效如果您在浏览器中复制和过去网址，您将看到图像。那为什么它没有在后台显示。我的一个wordpress网站自动获取背景图片的网址。请让我知道如何解决这个问题。

Answer 1

您需要添加引号。在大多数情况下，它不是强制性的，但在您的情况下，需要它，因为您有一些特殊字符可能会造成混淆。

例如，您在URL中有一个结束)，使其在结束前关闭。

<div style="background-image:url('https://i.amz.mshcdn.com/pr8NZRyZf0Kmz4FSGMkLtxUwZ70=/575x323/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fstory%2Fthumbnail%2F65469%2F23ede933-7d84-40fb-a9ee-eb7787a3feac.jpg');height:200px;">content goes here...</div>

UPDATE

因为您无法在URL中添加引号（因为它是使用wordpress自动生成的）。这是一个jQuery解决方案，将为您添加引号。 （但你需要能够只针对这个div）。

//change the selector to get only the needed DIV
var sel = $('div')

var url = sel.attr('style');
url = url.replace("url(","url('"); //add the first quote
url = url.replace("jpg)","jpg')"); //add the last quote

sel.attr('style',url);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url(https://i.amz.mshcdn.com/pr8NZRyZf0Kmz4FSGMkLtxUwZ70=/575x323/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fstory%2Fthumbnail%2F65469%2F23ede933-7d84-40fb-a9ee-eb7787a3feac.jpg);height:200px;">content goes here...</div>

此方法不是通用的，仅适用于此情况，因此您可以在其他情况下更新代码

Answer 2

见specification：

出现在不带引号的URI中的某些字符（如括号，空格字符，单引号（'）和双引号（“））必须使用反斜杠进行转义，以便生成的URI值为URI标记：'（'，' ）”。

或者：

• 逃避那些人物
• 使用引用的url()（以下示例）
• 使用没有这些字符的网址

    <div style="background-image:url('https://i.amz.mshcdn.com/pr8NZRyZf0Kmz4FSGMkLtxUwZ70=/575x323/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fstory%2Fthumbnail%2F65469%2F23ede933-7d84-40fb-a9ee-eb7787a3feac.jpg');">content goes here...</div>