如何使用 CSS 在图像或视频上放置图标？-css教程-PHP中文网

如何使用 CSS 在图像或视频上放置图标？

Patricia Arquette

发布： 2024-10-25 05:23:29

原创

1062 人浏览过

How to Position an Icon Over an Image or Video Using CSS?

将图标放置在图像或视频上

要将图标放置在图像或视频上，您需要创建一个相对的图像或视频周围的容器。然后，将图标的位置设置为绝对位置。

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