SASS를 사용하여 CSS에서 배경 이미지를 무작위로 선택하는 방법은 무엇입니까?

SASS로 배경 이미지 무작위화

목록에서 무작위로 선택된 배경 이미지로 CSS를 출력해야 하는 경우 SASS가 효과적인 솔루션을 제공합니다. . Sass v3.3.0에 무작위 기능이 도입되면서 이러한 무작위 선택을 쉽게 수행할 수 있습니다.

구현

무작위 배경 이미지 선택을 구현하려면 다음을 수행하세요. 임의의 이미지 목록($list)과 변수($imgKey)를 정의해야 합니다. 함수:

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;

CSS에서 nth() 함수를 사용하여 무작위 키를 기반으로 적절한 이미지를 선택하세요.

#footer-widgets .container .row {
    background-image: url("/images/#{$nth($list, $imgKey)}.jpg");
    ...
}

실시간 예시

이 기술을 보려면 http://sassmeister.com/gist/8966210의 라이브 예제를 방문하세요.

참고: 무작위 값은 Sass가 컴파일될 때만 변경되며 페이지에 액세스할 때마다 변경되지 않을 수도 있다는 점을 기억하세요.

위 내용은 SASS를 사용하여 CSS에서 배경 이미지를 무작위로 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!