Question

我完全没有编码经验。我只是复制/粘贴我在互联网上找到的模板示例，到目前为止效果很好。但是，有一个新的问题我无法解决。

简短的问题是，如何在<“ img”>之外设置图像的CSS类？例如，这是我所拥有的代码，并且不起作用：

$class_key= "top".(string)$count;
$returnarray[$level_key]='<img class=$class_key src=http://somepic.jpg  width=100px height=100px/>';

如果您需要更多详细信息，请在下面说明：

我正在对图像进行分层，并且顶部图像的位置是随机确定的。我正在使用CSS代码来命名和定义图层：

<style type="text/css">
.bottom
 {position:absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
 }
 .top1
 {
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }
.top2
 {
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }

并且变量$ count是随机确定的。如果我明确地编写class =“ top1”或class =“ top2”，则该代码有效。

请帮助我。谢谢

Answer 1

假设您正在使用PHP ...

您在$returnarray[$level_key]='<img class=$class_key.../>';上使用单引号，则$class_key不会被解释。

您可以使用以下内容：用单引号连接变量：

`$returnarray[$level_key]='<img class="' . $class_key . '".../>';`

或双引号

`$returnarray[$level_key]="<img class=\"{$class_key}\".../>";`

或使用双引号的另一种方式

`$returnarray[$level_key]="<img class=\"$class_key\".../>";`

查看相似的内容：PHP: Using a variable inside a double quotes

为更好地管理CSS，

将通用类添加到您的$class_key

$class_key= "img-top top".(string)$count;

然后CSS规则将适用于包含img-top类的任何图像：

.img-top{
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }

您还可以将循环内容包装在div中

<div class="img-top">
   [loop logic]
</div>

并为其中的所有图像定义CSS：

.img-top img{
   position:absolute;
   top: 100px;
   left: 100px;
   z-index: 2;
}

在循环内在图像上设置类

1 个答案: