如何在SASS中随机选择背景图片？

使用随机选择的 SASS 中的动态背景图像

为了增强网站的视觉吸引力，通常会合并背景图像。但是，如果您想为设计添加一点变化，使用 SASS 从列表中随机选择图像可能是一种强大的技术。

目标：

生成SASS 代码从预定列表中随机选择背景图像并将其插入到 CSS 中选择器。

解决方案：

在最新版本的 SASS 中，random() 函数提供了生成随机数的功能。通过将其与存储在变量中的图像 URL 列表相结合，您可以为 CSS 规则动态选择背景图像。

考虑以下示例：

$image-list: (
  "url(domain.com/blablabla/image1.png)",
  "url(domain.com/blablabla/image2.png)",
  "url(domain.com/blablabla/image3.png)",
  "url(domain.com/blablabla/image4.png)",
  "url(domain.com/blablabla/image5.png)"
);

$random-image: random(length($image-list));

#footer-widgets .container .row {
  background-image: nth($image-list, $random-image);
}

在此示例中，图像 URL 列表存储在 $image-list 变量中。 random() 函数用于生成 1 到 5（列表的长度）之间的随机整数。 nth() 函数用于获取指定随机索引处的图像 URL。

编译的 CSS 会将随机选择的背景图像 URL 包含在指定 CSS 选择器的 background-image 属性中。此代码可确保每次编译 SASS 时使用不同的背景图像。

注意事项：

需要注意的是，随机值仅在 Sass 期间生成汇编。这意味着背景图像将保持不变，直到再次编译 SASS，无论页面访问如何。

以上是如何在SASS中随机选择背景图片？的详细内容。更多信息请关注PHP中文网其他相关文章！