为何PHP在background-image:url()中使用echo总是出现转义字符？

嘿，我来帮你搞定这个头疼的小问题！

你的代码场景 #

你写了这段PHP代码来生成带背景图的figure标签：

<?php 
$imgurl = "https://cdn.jsdelivr.net/example.png"; 
$get_style = 'background-image: url(\''.$imgurl.'\'); '; 
?>
<figure id="centerbg" class="centerbg" style="<?php echo $get_style; ?>background-position: center center;background-attachment: inherit;">

但不管怎么调整，最终输出的HTML里，背景图URL的引号总是被转成了"，变成了：

问题根源&解决办法 #

这种情况通常是因为PHP的输出被自动转义了——可能是开启了全局转义设置，或者你用的模板引擎默认做了HTML实体转义。这里有几个简单有效的解决方式：

• 换双引号拼接字符串，用变量插值
  直接用双引号包裹$get_style，这样不需要转义引号，还能直接把变量插进去，代码更清爽：

  <?php 
  $imgurl = "https://cdn.jsdelivr.net/example.png"; 
  $get_style = "background-image: url('$imgurl'); "; 
  ?>
  

  或者用大括号把变量包起来，可读性更强：

  $get_style = "background-image: url('{$imgurl}'); ";
  

• 用htmlspecialchars_decode反转义输出
  如果没法改字符串拼接的方式，就在echo的时候用这个函数把转义后的实体转回来：

  <figure id="centerbg" class="centerbg" style="<?php echo htmlspecialchars_decode($get_style); ?>background-position: center center;background-attachment: inherit;">
  

• 检查全局转义设置
  看看是不是开启了magic_quotes_gpc这类旧的全局转义功能（PHP 5.4之后已经默认关闭了），如果开着建议关掉，避免这种自动转义的麻烦。

额外小技巧 #

其实你也可以直接把$imgurl嵌入到style属性里，不用单独拼接成$get_style，代码会更简洁直观：

<figure id="centerbg" class="centerbg" style="background-image: url('<?php echo $imgurl; ?>'); background-position: center center;background-attachment: inherit;">

这样减少了一步字符串拼接，也更容易排查问题～

---

内容的提问来源于stack exchange，提问作者Mashiro