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

무작위 선택을 사용하는 SASS의 동적 배경 이미지

웹 사이트의 시각적 매력을 향상시키기 위해 배경 이미지를 통합하는 것이 일반적입니다. 그러나 디자인에 다양성을 더하고 싶다면 SASS를 사용하여 목록에서 이미지를 무작위로 선택하는 것이 강력한 기술이 될 수 있습니다.

목표:

생성 미리 결정된 목록에서 배경 이미지를 무작위로 선택하여 CSS 선택기에 삽입하는 SASS 코드입니다.

해결책:

최신 버전의 SASS에서는 ran() 함수는 난수를 생성하는 기능을 제공합니다. 이를 변수에 저장된 이미지 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는 지정된 CSS 선택기의 background-image 속성에 무작위로 선택된 배경 이미지 URL을 포함합니다. 이 코드는 SASS가 컴파일될 때마다 다른 배경 이미지가 사용되도록 보장합니다.

고려 사항:

랜덤 값은 Sass 중에만 생성된다는 점에 유의하는 것이 중요합니다. 편집. 즉, 페이지 방문에 관계없이 SASS가 다시 컴파일될 때까지 배경 이미지가 동일하게 유지됩니다.

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