图像上的 CSS 播放按钮 - CSS

在 Web 应用程序中，一个很常见的需求是在图像上添加一个播放按钮用于播放视频或音频。在这篇文章中，我们将学习如何使用 CSS 创建自己的图像上的播放按钮。

前置知识

在学习如何创建图像上的 CSS 播放按钮之前，我们需要了解一些基本的 CSS 知识，包括：

• CSS 属性和值
• CSS 选择器和伪类
• CSS 盒模型

HTML 结构

在我们开始之前，我们需要创建一个基本的 HTML 结构。代码如下：

<div class="container">
  <div class="image">
    <img src="path/to/image.jpg" alt="Image">
    <button class="play-button"></button>
  </div>
</div>

在这里，我们有一个包含图像和播放按钮的容器。图像位于 .image 容器中，而播放按钮在图像上方绝对定位。我们将使用 CSS 来添加图像悬停状态下的播放按钮样式。

CSS 样式

现在，我们需要使用 CSS 样式来添加图像上的播放按钮。样式如下：

.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.image {
  position: relative;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  border: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.2s ease-out;
}

.image:hover .play-button {
  opacity: 1;
}

.play-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 27px solid white;
}

首先，我们设置了 .container 容器的位置，宽度和最大宽度，并对其进行居中。对于 .image 容器，我们只需将其位置设置为相对即可。

我们使用绝对定位将 .play-button 按钮放置在图像的中心位置。我们设置了 background-color，border，width，height 和 border-radius 属性来添加播放按钮的样式。我们还添加了一个 opacity 属性，使播放按钮在图像上悬停时淡入淡出。最后，我们使用 :before 伪类创建了播放按钮的三角形形状。

在 .image:hover .play-button 选择器中，我们将播放按钮的 opacity 属性设置为 1，使其在图像上悬停时完全显示出来。

测试

现在我们已经创建了图像上的 CSS 播放按钮，接下来我们可以复制代码到一个 HTML 文件，添加图像和相应的路径，然后在浏览器中测试我们的代码。

结论

使用 CSS 创建图像上的播放按钮可以为 Web 应用程序增加一些互动体验。我们可以对上面的代码进行修改以适应不同的需求，例如更改播放按钮的大小或形状，或在鼠标悬停或单击事件上添加更多效果等。