Question

我有一个模板技术可以生成我的DOM而不会生成我的CSS。在我的模板中，我正在迭代一个包含图标图像名称的对象列表。

我想要做的是获取该图标图像名称并将其用作CSS类。然后使用less，将背景图像路径设置为基于该类名称的内容：

.className {background: url(../some/path/constant/[@className].png);}

..我需要在模板中设置背景样式。

Answer 1

是!!设置CSS背景不依赖于LESS。如果你可以使用CSS来做到这一点，那么你总能用更少的时间来做。

设置不同的背景图像（LESS方式）

@image-base-url: "http://your-images-url.com";

.className1 {
    background-image: url("@{image-base-url}/image1.png");
 }
.className2 {
    background-image: url("@{image-base-url}/image2.png");
 }
.className3 {
    background-image: url("@{image-base-url}/image3.png");
 }

在您的HTML中：

<div class="className1>
      <span> This will have image1.png as background</span>
</div>
<div class="className2>
      <span> This will have image2.png as background</span>
</div>
<div class="className3>
      <span> This will have image3.png as background</span>
</div>

我可以使用Less来根据类名设置CSS背景图像吗？

1 个答案: