SASS가 배경 이미지를 무작위로 선택하는 데 어떻게 도움이 됩니까?

SASS에서 무작위 배경 이미지 선택

놀라운 요소로 웹 페이지를 꾸미고 싶으십니까? SASS를 사용하면 사전 정의된 목록에서 배경 이미지를 무작위로 선택하여 웹 사이트에 역동성을 더할 수 있습니다.

SASS로 무작위 배경 이미지 생성

Sass 제공 지정된 범위 내에서 난수를 선택하는 데 활용할 수 있는 편리한 난수 기능입니다. 이 기능을 이미지 URL 목록과 결합하면 SASS가 컴파일될 때마다 달라지는 배경 이미지로 CSS를 만들 수 있습니다.

예제 코드:

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

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

이 예에서 $imgKey는 1과 5 사이의 난수를 검색합니다. 그런 다음 $nth 함수는 $list에서 해당 난수에 해당하는 이미지 URL을 선택합니다. 변수. 결과는 지정된 컨테이너 행에 임의의 배경 이미지를 할당하는 CSS 규칙입니다.

컴파일 및 이미지 선택

임의의 배경 이미지는 페이지를 방문할 때마다 변경되는 것이 아니라 SASS가 다시 컴파일될 때만 변경됩니다. 이렇게 하면 무작위 선택이 여러 페이지 로드에 일관되게 반영되어 갑작스러운 시각적 변화를 방지할 수 있습니다.

위 내용은 SASS가 배경 이미지를 무작위로 선택하는 데 어떻게 도움이 됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!