SASS를 사용하여 바닥글에 대한 동적 배경 이미지를 만들려면 어떻게 해야 합니까?

SASS를 사용한 동적 배경 이미지

여러 위젯으로 웹사이트 바닥글의 스타일을 지정할 때 고유한 배경 이미지로 시각적 흥미를 더하면 미학을 향상시킬 수 있습니다. SASS를 사용하면 정의된 목록에서 배경 이미지 선택을 무작위로 지정할 수 있습니다.

SASS의 Random 함수를 사용한 솔루션

SASS v3.3.0에서는 random() 함수를 도입했습니다. 이를 이미지 URL 목록 및 변수 보간과 결합하면 컴파일 중에 임의의 배경 이미지를 동적으로 선택하는 CSS를 생성할 수 있습니다.

$imgKey: random(5);

$list: "url('http://domain.com/blablabla/apple.png'),
        url('http://domain.com/blablabla/banana.png'),
        url('http://domain.com/blablabla/cherry.png'),
        url('http://domain.com/blablabla/durian.png'),
        url('http://domain.com/blablabla/eggplant.png')";

$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: $nth;
    background-position: right bottom;
    background-repeat: no-repeat;
}

라이브 예시

라이브 예시를 참조하세요. http://sassmeister.com/gist/8966210에서 확인 가능.

중요 참고

모든 SASS 컴파일과 마찬가지로 무작위 이미지 선택은 SASS 컴파일 중에만 발생하며 반드시 페이지를 방문할 때마다 발생하는 것은 아닙니다.

위 내용은 SASS를 사용하여 바닥글에 대한 동적 배경 이미지를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!