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

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