css - 在循环中的图像上设置一个类

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;
}