Question

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

    <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

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

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

＆＃13;

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

＆＃13;

<强>更新

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

＆＃13;

//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);

＆＃13;

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

＆＃13;

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

Answer 2

请参阅specification：

出现在不带引号的URI中的某些字符（如括号，空格字符，单引号（＆＃39;）和双引号（＆＃34;））必须使用反斜杠进行转义，以便生成的URI值为URI令牌：＆＃39;（＆＃39;，＆＃39;）＆＃39;。

或者：

逃脱那些角色
使用引用的url()（以下示例）
使用

＆＃13;

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

＆＃13;

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

2 个答案: