SASS를 사용하여 URL 목록에서 배경 이미지를 무작위로 선택하려면 어떻게 해야 합니까?

Sass: 지정된 목록에서 임의의 배경 이미지 활용

강력한 CSS 확장 기능인 SASS는 웹 페이지 스타일 지정을 위한 고급 기능을 제공합니다. 이러한 기능 중 하나는 미리 결정된 목록에서 배경 이미지를 동적으로 선택하는 기능입니다. 이 기사에서는 SASS를 사용하여 이를 달성하는 방법을 살펴봅니다.

질문:

SASS를 사용하여 제공된 목록에서 배경 이미지를 무작위로 선택하는 CSS 코드를 생성하려면 어떻게 해야 합니까? URL?

답변:

이 작업을 수행하려면 버전 3.3.0에 도입된 SASS의 random() 기능을 활용하세요. 이 함수는 지정된 범위 내에서 난수를 생성합니다. 이 기능을 사전 정의된 이미지 URL 목록과 결합하면 동적 배경 이미지 할당을 생성할 수 있습니다.

다음 SASS 코드 조각을 고려하세요.

$imgKey: random(5);

$list: "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg";
$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: url("http://domain.com/blablabla/#{$nth}");
    background-position: right bottom;
    background-repeat: no-repeat;
}

이 예에서 $ list 변수는 이미지 URL 목록을 보유합니다. $imgKey 변수는 목록에서 선택할 이미지의 인덱스를 나타내는 1에서 5 사이의 난수를 생성합니다. n번째($list, $imgKey) 함수는 해당 인덱스에서 이미지 URL을 추출합니다.

추가 참고 사항:

• 무작위로 선택한 배경 이미지만 변경됩니다. SASS가 컴파일될 때. 페이지를 방문할 때마다 이런 일이 발생하지 않을 수도 있습니다.
• random() 함수의 범위를 목록의 이미지 수와 일치하도록 조정할 수 있습니다.
• 자세한 내용은 SASS 문서를 살펴보세요. random() 및 nth() 함수에 대한 정보입니다.

위 내용은 SASS를 사용하여 URL 목록에서 배경 이미지를 무작위로 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!