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

WBOY
풀어 주다: 2023-09-16 11:49:11
앞으로
1577명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿