Question

我正在使用WAMP。我想从我的数据库中获取背景图像URL，并希望在div类'box'中显示它。我按照跟进的方式尝试了但是没有成功。当我想要显示不同的图像时，最后一个背景图像出现在每个盒子上。我正在使用的代码是

<?php 
    $feild_set = get_all_feilds();
    while($feild = mysql_fetch_array($feild_set)) { 
        $url = $feild['background_image_url'];
        echo "<style>
            .box { 
                width: 300px ;
                height: 100px;
                background-image: $url;
                background-visibility: visible;
                border: 1px #00FF33;
                margin-bottom: 10px;
                display: inline-table;
                margin-right: 10px;
            }
            </style>";
        echo "<div class=\"box\">";
        echo "<a href=\"content.php?feild=" . $feild['id'] . "\" ><block_holder>{$feild['menu_name']}</block_holder></a>"; 
        echo "</div>";
    }
?>

提前完成

Answer 1

试试这个：

<?php 

  echo "
    <style>
      .box { 
        width: 300px ;
        height: 100px;
        background-visibility: visible;
        border: 1px #00FF33;
        margin-bottom: 10px;
        display: inline-table;
        margin-right: 10px;
      }
    </style>";

  $field_set = get_all_feilds();

  while ($field = mysql_fetch_assoc($field_set)) {
    echo '
    <div class="box" style="background-image:'.htmlspecialchars($field['background_image_url']).';">
      <a href="content.php?feild='.htmlspecialchars($field['id']).'">
        <block_holder>'.htmlspecialchars($field['menu_name']).'</block_holder>
      </a>
    </div>';
  }

?>

我做了什么？

在循环外部放置.box CSS类的声明，因此只输出一次
将mysql_fetch_array()更改为mysql_fetch_assoc()，因为它不那么混乱，效率更高
从background-image:类

.box

为每个div ~~的内联background-image:属性添加了style=属性，并在url()~~ 中包装了图片的网址（已经过了因为看起来URL已经存储在数据库中而已经完成了
在输出数据之前通过htmlspecialchars()传递数据
更正了feild到field的拼写，可以在不破坏其余代码的情况下完成
一些常规缩进和引用整理和可读性修复

实际上，您的CSS .box类被多次声明。由于 C SS的级联性质，只会使用上一个声明中使用的值 - 属性的每个声明都会覆盖最后一个，这就是您只看到最后一个图像的原因。您也不需要多次声明这些细节 - 类的整个想法是您可以声明它一次并多次使用它。如果您需要特定于元素的属性，请使用ID或内联样式（最好使用ID，但为简单起见，我在此处使用了内联样式）。

使用php添加div类属性

1 个答案: