如何阻止PHP剥离background-image CSS语句中的斜杠？

这问题我之前也踩过坑！其实不是PHP在移除斜杠，是你写的HTML里引号嵌套冲突了，浏览器解析的时候出错，才会出现那种奇怪的路径格式。

问题根源 #

你在style属性里用了双引号包裹，然后url()里面又用了双引号：

style="background-image: url("http://localhost/...")"

浏览器会把第一个"和url(后面的"配对，剩下的内容就被解析成了无效的属性值，看起来就像斜杠被剥离了一样。

几种解决方法 #

方法1：把url()里的双引号换成单引号

因为外层style用的是双引号，内部用单引号就不会冲突，PHP输出的时候也不用额外转义：

if($type == 'p'){ 
    echo '<div class="post" style="top: '.$spacing.'px;"> 
            <a href="'.$source.'">
                <div class="postwrapper"> 
                    <div class="thumbnail" style="background-image: url(\'http://localhost/varea/media/thumbnails/'.$postid.'.jpg\')"></div> 
                    <div class="info"> 
                        <div class="title">'.$title.'</div> 
                        <div class="pdesc"> 
                            <p>Likes: '.$likes.'</p> 
                            <p>Dislikes: '.$dislikes.'</p> 
                        </div> 
                    </div> 
                    <div class="underline"></div> 
                </div>
            </a> 
          </div>'; 
}

注意这里PHP字符串是用单引号包裹的，所以内部的单引号要加\转义一下，避免提前闭合字符串。

方法2：转义url()里的双引号

如果你想保留双引号，可以用\"来转义内部的双引号，告诉PHP这是字符串里的普通字符，不是闭合符号：

if($type == 'p'){ 
    echo '<div class="post" style="top: '.$spacing.'px;"> 
            <a href="'.$source.'">
                <div class="postwrapper"> 
                    <div class="thumbnail" style="background-image: url(\"http://localhost/varea/media/thumbnails/'.$postid.'.jpg\")"></div> 
                    <div class="info"> 
                        <div class="title">'.$title.'</div> 
                        <div class="pdesc"> 
                            <p>Likes: '.$likes.'</p> 
                            <p>Dislikes: '.$dislikes.'</p> 
                        </div> 
                    </div> 
                    <div class="underline"></div> 
                </div>
            </a> 
          </div>'; 
}

方法3：用HEREDOC语法（推荐，代码更易读）

HEREDOC可以让你直接写HTML内容，不用频繁拼接字符串和转义引号，变量直接用{$变量名}插入就行，可读性高很多：

if($type == 'p'){ 
    echo <<<HTML
<div class="post" style="top: {$spacing}px;"> 
    <a href="{$source}">
        <div class="postwrapper"> 
            <div class="thumbnail" style="background-image: url('http://localhost/varea/media/thumbnails/{$postid}.jpg')"></div> 
            <div class="info"> 
                <div class="title">{$title}</div> 
                <div class="pdesc"> 
                    <p>Likes: {$likes}</p> 
                    <p>Dislikes: {$dislikes}</p> 
                </div> 
            </div> 
            <div class="underline"></div> 
        </div>
    </a> 
</div>
HTML;
}

注意<<<HTML和结尾的HTML;要单独占一行，而且结尾的HTML;前面不能有空格。

用上面任意一种方法，浏览器都能正确解析背景图的URL了，不会再出现斜杠“消失”的问题。

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