如何使用 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中文网其他相关文章！