다운로드 기능을 위해 이미지나 비디오 위에 아이콘을 겹쳐 놓는 방법은 무엇입니까?

이미지 또는 비디오 위에 아이콘 배치

이 튜토리얼에서는 이미지 또는 비디오 위에 아이콘을 겹쳐놓는 문제를 다룹니다. 아이콘은 왼쪽 하단에 있어야 합니다. 사용자가 아이콘과 상호작용하면 이미지를 다운로드할 수 있는 옵션을 제공하는 프롬프트가 나타납니다.

관련 단계

이 효과를 얻으려면 영상. 그런 다음 아이콘을 "위치: 절대"로 배치하여 하단과 왼쪽 가장자리에 정렬합니다.

코드 예

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }</code>

<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet">

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="다운로드 기능을 위해 이미지나 비디오 위에 아이콘을 겹쳐 놓는 방법은 무엇입니까?" >
    <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div></code>

추가 고려 사항

Bootstrap 3의 멋진 글꼴과의 호환성을 위해 다음 기술을 사용하십시오.

<code class="html"><div class="btn btn-primary btn-lg">
    <i class="glyphicon glyphicon-download"></i> Download
</div></code>

위 내용은 다운로드 기능을 위해 이미지나 비디오 위에 아이콘을 겹쳐 놓는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!