如何添加播放图标到CSS上的图像 [英] How to add a play icon to Image on CSS

问题描述

我正在寻找如何添加播放图标到CSS上的图像。

I'm looking for how to add a play icon to Image on CSS.

我试过这个代码，但它不会出现在我想要它出现在中心：

I tried this code, but it doesn't appear right I want it to appear on the center :

    .video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(http://www.slatecube.com/images/play-btn.png);
   height: 100%;
   width: 100%;
   top: 20px;
   left: 20px;
}

html：

<div class="video" >  
<img  style="height:200px"src="http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg"  />
    <a href="#"></a>
</div>

这里是jsFiddle：

here is the jsFiddle :

a href =http://jsfiddle.net/z5y8ht4y/ =nofollow> DEMO

DEMO

推荐答案

DEMO

您应该设置background- size

you should set background-size

.video a {
  position: absolute;
  display: block;
  background: url(http://www.slatecube.com/images/play-btn.png);
  height: 100%;
  width: 100%;
  top: 75px;
  left: 150px;
  background-size: 50px 50px;
  background-repeat: no-repeat;
}

这篇关于如何添加播放图标到CSS上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！