왼쪽 하단 모서리에 있는 이미지나 비디오에 아이콘을 겹쳐 놓는 방법은 무엇입니까?

이미지 또는 비디오 위에 아이콘을 겹치는 방법

소개

이 질문에서는 이미지 또는 비디오 위에 아이콘을 배치하는 기술을 탐구합니다. 비디오, 특히 왼쪽 하단에 있습니다. 두 가지 방법, 즉 HTML과 CSS를 사용하는 방법과 Font Awesome이 포함된 Bootstrap 3을 활용하는 방법을 살펴보겠습니다.

HTML과 CSS를 사용하여 아이콘 위치 지정

HTML을 사용하여 이미지나 동영상 위에 아이콘을 배치하려면 및 CSS를 사용하려면 다음 단계를 따르세요.

1. 이미지나 동영상 주위에 상대 컨테이너를 만듭니다.
2. 아이콘 위치를 절대 위치로 설정합니다.
3. 하단 및 왼쪽 속성.

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

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

Bootstrap 3 및 Font Awesome을 사용하여 아이콘 위치 지정

Bootstrap 3 및 Font Awesome을 사용하여 이미지나 비디오 위에 아이콘을 배치하려면 , 다음 단계를 따르세요.

1. Font Awesome CSS 라이브러리를 포함합니다.
2. btn 클래스와 fa-download 아이콘을 사용하여 원하는 위치에 버튼을 만듭니다.

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

<button class="btn btn-primary fa fa-download" type="button"></button></code>

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

결론

이러한 방법을 구현하면 이미지나 동영상 위에 아이콘을 효과적으로 배치하고 표시하여 추가 기능이나 시각적 단서를 제공할 수 있습니다.

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