CSS——scss中动态引入背景图

在SCSS中，你可以使用@each指令来遍历列表并动态地引入背景图。以下是一个简单的例子：




// 假设你有一个包含图片路径的列表
$background-images: 'image1.jpg', 'image2.jpg', 'image3.jpg';
 
// 遍历列表并为每个图片创建一个类
@each $image in $background-images {
  .bg-image-#{$image} {
    background-image: url(#{$image});
  }
}

编译后的CSS将是：




.bg-image-image1.jpg {
  background-image: url(image1.jpg);
}
 
.bg-image-image2.jpg {
  background-image: url(image2.jpg);
}
 
.bg-image-image3.jpg {
  background-image: url(image3.jpg);
}

这样，你可以将生成的类添加到HTML元素中，以应用对应的背景图。

CSS——scss中动态引入背景图

评论已关闭

推荐阅读