在图像或视频上放置图标
要将图标放置在图像或视频上，请在图像周围创建一个相对容器并设置图标的绝对位置就足够了。
代码：
<code class="css">.container {
position: relative;
}
.container img {
display: block;
}
.container .fa-download {
position: absolute;
bottom: 0;
left: 0;
}</code>HTML：
<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <div class="container"> <img src="https://placekitten.com/300/300"> <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a> </div></code>
Bootstrap 3 兼容性：
此方法也与 Bootstrap 3 兼容。要使用 FontAwesome 下载图标在左下角添加按钮，只需添加以下代码：
<code class="css">.container {
position: relative;
}
.container img {
display: block;
}
.container .btn-download {
position: absolute;
bottom: 0;
left: 0;
padding: 6px;
background-color: #337ab7;
color: #fff;
border: none;
border-radius: 3px;
}
.container .btn-download i {
font-size: 1.5em;
}</code><code class="html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <div class="container"> <img src="https://placekitten.com/300/300"> <a href="dog.png" download="new-filename" class="btn-download"><i class="fas fa-download"></i></a> </div></code>
以上是如何使用 CSS 在图像或视频上放置图标？的详细内容。更多信息请关注PHP中文网其他相关文章！
