의사가 CSS와 함께 삽화를 추가합니다

Eric Meyer의 블로그 게시물 사이에는 5 개의 다른 그림이 영리하게 사용되며 무작위로 나타나는 것으로 보입니다.

Eric은 각 그림을 별도의 배경 이미지로 설정하고 nth-of-type CSS 속성을 사용하여 이미지를 전환합니다.

 .Entry : nth-of-type (2n 1) :: 이전 {
   배경 이미지 : URL (image-1.png);
}

.Entry : nth-of-type (3n 1) :: 이전 {
   배경 이미지 : URL (image-2.png);
}

.Entry : nth-of-type (4n 1) :: 이전 {
   배경 이미지 : URL (image-3.png);
}

.Entry : nth-of-type (5n 1) :: 이전 {
   배경 이미지 : URL (image-4.png);
}

여기서는 자체 자체 :nth 테스트 도구를 권장합니다.이 테스트 도구는 (2n 1) 과 같은 표현을 이해하는 데 도움이됩니다. 문자열을 입력하고 웹 사이트에 어떤 영향을 미치는지 확인할 수 있습니다.

그가 언급했듯이 Eric의 블로그 게시물로 돌아가서 그의 기술은 의사 랜덤 이며, 페이지의 그림은 무작위로 보이지만 실제로는 그렇지 않습니다. 어쨌든, 이것은 매우 영리한 기술입니다! 그것은 웹 사이트를 오랫동안 탐색 할 때 발생하는 시각적 단조성을 효과적으로 깨뜨립니다.

실제 효과는 다음과 같습니다.

효과는 훌륭합니다!

또 다른 방법은 CSS에서 임의 숫자를 사용하는 것입니다. 예를 들어, JavaScript로 변수를 설정하고 CSS 사용자 정의 속성을 사용하여 적용 할 수 있습니다. 또는 모든 그림을 단일 스프라이트 이미지 파일에 넣고 임의 번호를 기준으로 background-position 변경할 수 있습니다.

CSS에서 이것은 확실히 잘못된 답변이없고, 동일한 탁월한 효과를 달성하는 다른 방법입니다!

위 내용은 의사가 CSS와 함께 삽화를 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!