이미지나 비디오 위에 아이콘을 배치하고 클릭 시 다운로드를 트리거하는 방법은 무엇입니까?

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

문제:
아이콘을 위에 배치해야 합니다. 이미지 또는 비디오를 왼쪽 하단 모서리에 맞춥니다. 아이콘을 클릭하면 이미지에 대한 다운로드 프롬프트가 실행되어야 합니다.

해결책:
원하는 위치를 지정하려면 이미지 주위에 상대 컨테이너를 만들어야 합니다. 그런 다음 아이콘 위치를 절대 위치로 설정합니다. 다음은 코드 예입니다.

<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 Font-Awesome:
예, Bootstrap 3 Font-Awesome에도 동일한 방법이 적용됩니다. 위 코드의 Font Awesome 버전을 다음으로 바꾸세요.

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></code>

<code class="html"><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="fa fa-download"></i></a>
</div></code>

위 내용은 이미지나 비디오 위에 아이콘을 배치하고 클릭 시 다운로드를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!