使用 CSS 显示图像：内容 url 不一致答案

【问题标题】：Displaying images with CSS: content url inconsistency使用 CSS 显示图像：内容 url 不一致
【发布时间】：2017-10-16 06:39:51
【问题描述】：

我正在尝试使用 CSS 显示图像，以便我可以根据选择的样式表切换正在显示的图像。它有时工作正常，其他人则不然。你能帮我找出原因吗？

我先用php根据页面id来回显HTML：

if($host == 'comparison.php?page=1.1.9') 
        {
            echo "<div class='image8'></div>";
        }
        if($host == 'comparison.php?page=1.1.10') 
        {
            echo "<div class='image9'></div>";
        }

在 CSS 中，我识别类，并告诉它显示图像：

div.image8 {
   content:url(homilies/1.1.9.jpg);
   width: 100%;
}

div.image9 {
   content:url(homilies/1.1.10.jpg);
   width: 100%;
}

1.1.10 完美运行，当我选择另一个样式表时图像会发生变化。 1.1.9 根本不起作用，当我检查元素时，'div.image8' 甚至没有出现。这里会发生什么？它也适用于其他地方，我无法弄清楚模式。

【问题讨论】：

如果你使用 var_dump($host) 会得到什么？
@boovad 当我把它放在回声之后，我得到了string(72) "comparison.php?page=1.1.9"
只是好奇...当您有 $_GET['page'] 可供您使用时，您为什么要检查 $host？您可以设置$page=$_GET['page']; 然后您可以将代码简化为if ($page=='1.1.9') echo '<div class="image8"></div>'; 可能无法解决您的问题，但它有助于使您的代码更易于调试。我还建议使用开关盒。看起来您实际上要显示的不仅仅是这两个图像。
@Cagey215 感谢您的建议 - 我的代码已经看起来更干净了。尽管如此，图像加载仍然没有骰子。就开关盒而言，它看起来像这样吗？ switch ($page) { case "1.1.1": echo "<div class='image1'></div>"; break; case "1.1.2": echo "<div class='image2'></div>"; break; case "1.1.3": echo "<div class='image3'></div>"; break; }
请注意，content 应与 ::before 或 ::after 伪类 (stackoverflow.com/questions/17907833/…) 一起使用。例如：jsfiddle.net/as9gy8z4/2

标签： php html css image

【解决方案1】：

好的，D.C，我心情很好，就像我在上面的评论中提到的那样，我创建了一个快速、低劣且肮脏的单页代码来测试您的情况。一切对我来说都很好，但我也学到了一些东西。我不知道 1.1.10 如何完美地为您工作，但不是 1.1.9，因为据我所知，两者都不应该工作。在 Firefox v53.0.2 中测试。

使用content:url('some_image'); 从未向我显示图像。
必须使用 background-image: url('some_image'); 才能显示图像。
DIV 需要在 DIV 标记之间有一个不间断空格 (&nbsp;)，以便 DIV 显示图像。换句话说，如果 DIV 中没有内容，则不能有背景图像。所以也许你只需要在你的 DIV 标签之间添加一个不间断的空格就可以了？

就是这样。现在来看一个工作示例。您可以并且应该修改它以满足您的需求。例如链接样式表而不是像我一样的内部链接。我只是想快速编写一页代码来测试是否一切正常。

<?php
//Use a PHP ternary operator to check if the GET variable is set in the URL.
$page=isset($_GET['page'])?$_GET['page']:'';
switch ($page) {
  case '1.1.9':
    $img_class='image8';
    break;
  case '1.1.10':
    $img_class='image9';
    break;
  case '1.1.11':
    $img_class='image10';
    break;
  default:
    $img_class='image0';
    break;
}
?>
<!DOCTYPE HTML>
  <html>
  <head>
    <title>Image By Get Var</title>
    <style>
      /*Everything between the STYLE tags would actually be in your style sheet instead of internal to your page.*/
      html, body {
        height: 100%;
        background: #ccc;
        padding: 10px;
      }
      #img_container {
        margin-top: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        height: 50%;
        width: 50%;
      }
      /* You can use the static images below to test this code, but should replace with your images using a relative path.*/
      /* Used tinypic.com for demo images since it allows free hotlinking. */
      div.image0 {
        background-image: url('http://i50.tinypic.com/j9blw9.jpg');
      }
      div.image8 {
        background-image: url('http://i42.tinypic.com/5n52ex.jpg');
      }
      div.image9 {
        background-image: url('http://i60.tinypic.com/316ozv5.jpg');
      }
      div.image10 {
        background-image: url('http://i43.tinypic.com/2eg5j7s.jpg');
      }
    </style>
  </head>
  <body>
    <p>The form only exists so that a GET variable can be sent to the page to test PHP setting CSS based on the GET variable.</p>
    <form method="get">
      <input type="radio" name="page" value="1.1.9"> 1.1.9<br>
      <input type="radio" name="page" value="1.1.10"> 1.1.10<br>
      <input type="radio" name="page" value="1.1.11"> 1.1.11<br>
      <input type="submit" value="Submit">
    </form>
    <form>
      <input type="submit" value="Reset To Default">
    </form>
    <?php
    /* The div container has a non-breaking space so that the div will exist to have a background */
    echo '
      <div id="img_container" class="'.$img_class.'">&nbsp;</div>
    ';
    ?>
  </body>
</html>

我希望这会有所帮助。如果在我的示例中将图像替换为图像的相对路径时 1.1.9 仍然无法正常工作，那么您应该确保图像位于您指定的路径中。

祝你好运！

【讨论】：

你是圣人。测试完我会更新的。
还是没有运气。我会重新开始，试着弄清楚这里到底发生了什么。
所以你首先自己运行我的代码，看看它是如何工作的。然后您将示例图像替换为图像的相对路径，并且 1.1.9.jpg 仍然不起作用？如果是这样，那么听起来 1.1.9.jpg 不存在。请记住，它可能区分大小写。所以如果文件名实际上是1.1.9.JPG，那么你需要指定大小写。您是否确认该文件位于 homilias 目录中？
是的，我的第一个测试是确保图像在服务器上，在正确的目录中，并且没有以某种方式损坏。太奇怪了。 1.1.1、1.1.10、1.1.11 和 1.1.12 是唯一适用于 30 个奇数页面 ID 的图像。好像没有模式。我使用文本比较工具来绝对确保这些图像中的代码是统一的，但我只能摸不着头脑。我认为下一步对我来说是再次测试您的方法，这次是在无菌环境中。可能是其他一些代码弄乱了我。
@Cagey215 如果你愿意，我可以pm你实际的项目，它可能会让事情更清楚。这是我第一次尝试 Web 开发，所以我可能会遗漏一些非常明显的东西。

【解决方案2】：

为任何感兴趣的人找到了解决方案：使用 CSS 验证器后，我发现有一些不可见的字符搞砸了。经验教训。

【讨论】：