Question

我正在尝试使用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'甚至都没有显示出来。这可能会发生什么？它也适用于其他地方，我无法弄清楚这种模式。

Answer 1

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

使用content:url('some_image');从未向我展示图片。
必须使用background-image: url('some_image');才能显示图片。
DIV在DIV标签之间需要一个不间断的空间（ ），以便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仍然不起作用，那么应确保图像位于您指定的路径中。

Answer 2

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

使用CSS显示图像：内容网址不一致

2 个答案: