css照片有播放键

在网页中，我们经常需要使用图片来展示信息和吸引用户的注意力。但是，如果您的图片是一张视频的封面图，如何让用户知道这是一个可以播放的视频呢？这时，一个带有播放键的CSS照片可以帮助您实现这个目标。

HTML代码：
<div class="play-button-container">
  <img src="video-cover.jpg" alt="video-cover">
  <div class="play-button"></div>
</div>
CSS代码：
.play-button-container {
  position: relative;
  display: inline-block;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

在这个例子中，我们使用了一个div容器来包含图片和播放键。我们给容器设置了position:relative，这样就能使播放键的位置相对于容器而不是整个页面定位。接下来，我们使用了position:absolute来定位播放键。我们将它的位置设置在容器的中心，这样播放键就可以居中显示。

最后，我们使用CSS的border属性来创建播放图标。这里我们使用三条边来构造一个三角形，将左边的边界设为白色来模拟播放按钮的颜色。当用户将鼠标悬停在按钮上时，我们可以使用:hover伪类来添加一些动画效果，如改变按钮颜色或者添加阴影效果。

现在，您已经了解了如何使用CSS创建一个带有播放键的照片。将这个代码应用于您的网页中，让您的用户更加方便地看到您的视频内容。