HTML과 CSS를 사용하여 이미지 오버레이 아이콘을 만드는 방법

개요

이미지 오버레이는 커서가 첫 번째 이미지 위에 있을 때 하나의 아이콘 또는 이미지가 화면에 표시되고 다른 아이콘이 화면에 표시되는 두 개의 이미지 또는 아이콘의 오버레이입니다. 따라서 이 기능을 구현하려면 HTML 및 CSS에 대한 기본 지식과 전환 및 애니메이션 속성이 필요합니다. 따라서 오버레이를 생성하기 위해 내부 오버레이 아이콘을 생성하는 몇 가지 예를 살펴보겠습니다.

알고리즘

1단계 - 텍스트 편집기에서 HTML 파일을 만들고 해당 파일 내에 HTML 상용구를 만듭니다.

2단계 − 이제 이미지(그 중 하나는 정적 이미지)와 다른 이미지 아이콘(이미지 위에 마우스를 올리면 표시됨)이 포함된 div 컨테이너를 만듭니다.

3단계 − src 속성과 함께 img 태그를 삽입하세요. src 속성에 이미지 링크를 추가하세요.

으아악

4단계 − 이제 HTML 문서의 head 태그에 글꼴 Awesome CDN 링크를 삽입합니다. 아래 CDN 링크.

으아악

5단계 − 이제 글꼴 Awesome 사용자 아이콘 클래스를 사용하여 오버레이 이미지를 만듭니다.

으아악

6단계−이제 동일한 폴더에 style.css 파일을 만들고 style.css 파일을 HTML 문서에 연결합니다.

으아악

7단계 − HTML 요소의 스타일을 설정하고 이미지 위로 마우스를 가져갈 때 오버레이가 나타나도록 스타일을 지정합니다.

8단계 − 이미지 오버레이가 성공적으로 생성되었습니다.

예

이 예에서는 이미지와 글꼴 Awesome 아이콘을 사용하여 이미지 오버레이를 만들었습니다. Font Awesome 사용자 아이콘 클래스는 Font Awesome 라이브러리에서 가져옵니다. 그래서 이를 빌드하기 위해 폴더에 두 개의 파일을 만들었습니다. 한 파일에는 함수의 기본 부분이 포함된 index.html이 포함되어 있고 다른 파일에는 Work 함수의 스타일과 주요 부분이 포함된 style.css가 포함되어 있습니다.

으아악

아래 제공된 이미지는 위 예제의 출력입니다. 첫 번째 이미지는 위 함수가 브라우저에 로드될 때의 출력을 보여주고, 두 번째 이미지는 커서가 첫 번째 이미지 위에 있을 때의 출력을 보여줍니다. 따라서 사용자가 특정 이미지 위로 마우스를 가져가면 겹치는 이미지가 표시됩니다.

결론

이 기능은 사용자의 프로필이 이미지에 표시되는 주소록과 같은 애플리케이션에서 사용되며, 사용자가 이미지를 클릭하거나 마우스를 올리면 특정 프로필의 세부 정보가 표시됩니다. 이 기능을 구축하는 경우 이미지나 아이콘, 정적 이미지, 마우스 오버 시 표시되는 이미지의 크기가 동일해야 합니다(예: 너비와 높이가 동일해야 함).

위 내용은 HTML과 CSS를 사용하여 이미지 오버레이 아이콘을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!