反斜杠被添加到浏览器中的背景 URL答案

【问题标题】：Back slashes being added to background-url in browser反斜杠被添加到浏览器中的背景 URL
【发布时间】：2016-01-14 12:31:33
【问题描述】：

我正在尝试在 Wordpress 的自定义 CSS 中激活背景图像。

我已经把它粘贴进去了，但是当我在 Chrome 中检查元素时。在 URL 的前面和末尾添加了反斜杠。意味着图像不会显示。

为什么要添加这些？这是补丁，下面显示了添加的内容：

背景图片：url(\"wp-content/uploads/2016/01/my-logo-backgroundurl.png\");

当我把完整的 url 路径放入背景图片：url("http://example.com/wp-content/uploads/2016/01/my-logo-backgroundurl.png");

@media (max-width: 768px) and (min-width: 475px)
#header-logo-image {
position: relative;
top: -10px;
left: 0;
background-image: url("wp-content/uploads/2016/01/my-logo-backgroundurl.png");
width: 250px;
height: 100px;
background-repeat: no-repeat;
margin: 0 auto;
}

【问题讨论】：

听起来好像有什么东西试图逃避您使用的引号。你使用的是正确的......因为它看起来不像？
相关？ - stackoverflow.com/questions/2034575/…
我已经尝试过使用 " 和 ' 并且没有和所有空格，所有这些都会在 url 的前面和结尾产生一个 \。
不带引号试试看……如果这不起作用……你必须深入研究你的 WP 安装，看看它在做什么。也试试 WP 论坛。 - css-tricks.com/…
值得注意的是，媒体查询不正确，缺少大括号。

标签： css wordpress

【解决方案1】：

我知道它是在一年半之后，但我遇到了同样的问题，当我进行谷歌搜索时，这是页面是第一个条目。我通过删除引号来解决这个问题。这应该有效：

background-image: url(wp-content/uploads/2016/01/my-logo-backgroundurl.png)

【讨论】：

【解决方案2】：

我没有足够的声誉直接发表评论，所以我写信给这里。正如@Paulie_D 所说，可以这样修复：

@media (max-width: 768px) and (min-width: 475px) {
  #header-logo-image {
    position: relative;
    top: -10px;
    left: 0;
    background-image: url("wp-content/uploads/2016/01/my-logo-backgroundurl.png");
    width: 250px;
    height: 100px;
    background-repeat: no-repeat;
    margin: 0 auto;
  }
}

如果您想使用@media 规则，我想这可能会有所帮助。 CSS3 @media Rule

【讨论】：

是的，在这种情况下它得到了选择器#header-logo-image