在 css 背景图像中转义 PHP，或 css 语法问题？

Posted 2023-03-06

【中文标题】在 css 背景图像中转义 PHP，或 css 语法问题？

【英文标题】：escaping PHP in css background image, or problem in css syntax?

【发布时间】：2022-01-22 03:53:30

【问题描述】：

编辑：找到解决方案。在问了很多之后，似乎问题出在两个人身上。起初，由于双引号，它不会显示。我删除了它，现在浏览器应该可以很好地呈现它。现在它没有出现的原因是因为没有设置width 和height。尽管我的 CSS 代码，我只是设置了任意数量的两者，现在我可以看到它们潜伏在拐角处。

这本来可以很简单，但我不明白它是如何工作的。我正在构建一个滑块并使用 php 从数据库中获取图像。

问题是图像无法显示。

我正在使用此代码通过 CSS 显示图像：

$output .= '<div class="overlay-image" style="background-image: url("'.$image.'");"></div>        

从下到上，一切都完全正常，除了图像不会显示的部分。 我什至为overlay-image 设置了CSS，例如

.overlay-image 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;

我删除了background-image 样式，并在它下面使用了img。它确实成功地显示了图像，尽管被拧错了位置（当然还没有设计）

 <img src="'.$image.'">

$image 的值包含文件夹本身。我正在编辑的页面是index）例如，如果您将其打印出来，它将显示uploads/img.jpg

我打开检查器，它显示：

我也试过这种方法，但没有奏效。现在我真的很困惑到底是什么问题。

$image = $row['image'];
$image-bg-style = "background-image: url('".$image."'); ";

【问题讨论】：

你在双引号中使用双引号，我认为你的图像路径是错误的

我也去掉了样式里面的双引号，所以看起来<div class="overlay-image" style='.$image.'></div>还是不行

【参考方案1】：

你的问题是你用完了不同的引号：

$output .= '<div class="overlay-image" style="background-image: url("'.$image.'");"></div>';

这些引号全部嵌套在一起：

PHP 单引号'<div ...url("' 和'");"></div>' html 属性引号，style="...;" CSS 引号，url("...")

请注意，HTML 和 CSS 引号使用相同的字符，因此 浏览器不知道哪个是哪个。它是这样解释它们的：

一个 HTML 属性，style="background-image: url(" 更多 HTML 属性与来自$image 的任何 PHP 回显 最后一个流浪的");"，可能只是被丢弃了

您需要做的是适当地转义 CSS 引号以适应 HTML - " 变为 "：

$output .= '<div class="overlay-image" style="background-image: url(&quot;'.$image.'&quot;);"></div>';

【讨论】：

它仍然没有为我工作，正是这样做的。

【参考方案2】：

正如其他人指出的那样：您将双引号嵌套在双引号内：

$output = ' style=" background-image: url("'.$image.'") " '
                  ^                       ^          ^  ^ 
                

生产

style=" background-image: url( "_someurl_" ) "

被浏览器解释为

style="background-image: url( "

_someurl_" ) "

你想要的是在_someurl_周围单引号：

style=" background-image: url( '_someurl_' ) "

但是你不能直接使用它们，因为你会混淆 PHP，因为你的字符串已经用单引号引起来了：

$output = ' style=" background-image:url( '_some_url_' ) " ';
          ^                               ^          ^     ^

会给出解析错误。

所以诀窍是使用单引号伪装作为PHP不识别为单引号的东西，但浏览器可以。为此，您可以将字符串中的单引号替换为

其 HTML 实体等效 ' chr(39)，是 ascii 字符 '

您的代码将是：

$output.= '<div class="overlay-image" 
           style="background-image: 
           url(&apos;'.$image.'&apos;);"></div>        

或

$output.= '<div class="overlay-image" 
           style="background-image: 
           url('.chr(39).$image.chr(39).');"></div>        

【讨论】：

我都试过了，还是不行。我打开了检查器，这就是代码<div class="overlay-image" style="background-image: url('uploadedimg/61bfd1ac51a6b5.87619245.jpg');"></div> 显示的内容。相比之下，工作的img 显示<img src="uploadedimg/61bfd1ac51a6b5.87619245.jpg">

啊。删除样式标记的 url 部分中的撇号。所以`style="background-image: url(uploadedimg/61bfd1ac51a6b5.87619245.jpg);"

去掉撇号后，它们仍然不显示。使用apos& 这是检查员<div class="overlay-image" style="background-image: url('.$image.');"></div> 的结果，使用chr(39) <div class="overlay-image" style="background-image: url(.chr(39).$image.chr(39).);"></div>

尝试硬编码代码中的 url（将 $image 替换为实际链接），然后查看它是否显示。否则会出现其他问题。