如何使用 CSS 在圖像或影片上放置圖示？

將圖示放置在影像或影片上

要將圖示放置在影像或影片上，您需要建立一個相對的影像或影片周圍的容器。然後，將圖示的位置設為絕對位置。

`

<img  src="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="如何使用 CSS 在圖像或影片上放置圖示？" >
<a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>

`

在此範例中，「.container」類別設定為position:relative ，並且「.fa-download」類別設定為position：absolute。這會將圖示放置在圖像的左下角。

使用Bootstrap 3 Font-Awesome

在圖像的左下角添加按鈕使用Bootstrap 3 和Font-Awesome，您可以使用以下程式碼：

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

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
  <img  src="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="如何使用 CSS 在圖像或影片上放置圖示？" >
  <a href="dog.png" download="new-filename" class="btn btn-primary btn-download"><i class="fa fa-download"></i></a>
</div></code>

以上是如何使用 CSS 在圖像或影片上放置圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！