將圖示放置在影像或影片上
要將圖示放置在影像或影片上，您需要建立一個相對的影像或影片周圍的容器。然後，將圖示的位置設為絕對位置。
`
<img src="https://placekitten.com/300/300"> <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="https://placekitten.com/300/300"> <a href="dog.png" download="new-filename" class="btn btn-primary btn-download"><i class="fa fa-download"></i></a> </div></code>
以上是如何使用 CSS 在圖像或影片上放置圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
