Question

您好我最近在我的代码中发现了这个错误。

此链接“http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg”如果我将其与

一起使用是安全的

<img scr="http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg">

但是如果我使用

，至少图像不显示是无效的

<div style="background:url(http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg)" style="width:100%; height:300px"></div>

有没有人知道为什么对img有效但对背景无效？任何建议都会很棒。

Answer 1

将网址更改为http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas%20Ranch,%20Calistoga,%20California_%20Paradise%20with%20a%20Purpose.jpg可能会有效..

正如我在评论中所述，您的网址不正确urlencoded。 Url是不允许的空格。我假设浏览器知道如何处理写得不好的img标签的src属性但是在css上失败，很可能是因为你没有将url封装在引号中，如下所示：

background:url('http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg');

无论哪种方式，尝试在文件名中一起避免使用空格，最终会减少头痛。

Answer 2

将您的网址放在引号中。那是......你有：

background:url(http://yadda/yadda.jpg);

将其更改为：

background:url('http://yadda/yadda.jpg');

当我这样做时，它适用于我，包括空格和用%20替换的空格。总是试着在文件名中保持简单。文件系统或编程环境可能会严重处理标点符号和空格。

无论如何，报价是你的朋友。

另外，请考虑将您的样式放入标记中，而不是将其嵌入到内嵌中。

<head>
<style type="text/css">
  .foo {
    background:url=('http://yadda/yadda.jpg') no-repeat;
  }
</style>
</head>

<body>
<p class="foo">Hello, world.</p>
</body>

Answer 3

考虑到最后一种样式可能无法正常工作，您不应在div中放置两个Style属性。

css html安全文件名图片背景vs图片标签

3 个答案: