Question

我正在尝试在我的WordPress中使用CSS在缩略图上显示播放按钮。我尝试了很多方法，但总是很糟糕。你能帮助我，我错了吗？

.post-thumbnail-sidebar {
  display: block;
  text-align: center;
}
.post-thumbnail-sidebar embed,
.post-thumbnail-sidebar iframe,
.post-thumbnail-sidebar object {
  margin-bottom: 30px;
}

.post-thumbnail-sidebar a {
   position: absolute;
   display: block;
   background: url("https://i.imgur.com/FPwyRnP.png") no-repeat;
   height: 85px;
   width: 136px;
   top: 100%;
   left: 100%;
   margin: -64px 0 0 -88px;
}

<a class="post-thumbnail-sidebar" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( $r_post_thumb_size, array( 'itemprop' => 'image' ) ); ?>
</a>

Answer 1

还不够，但我认为你可以从这开始。 here's a fiddle

.second-img {
  position: absolute;
  top: 0px;
  margin-left: 20px 
}

<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0;" src=  "https://vincentloy.files.wordpress.com/2012/01/in-time-2011-r5-line-xvid-fusion_screenshot_4.jpg">
<a href = "https://vincentloy.files.wordpress.com/2012/01/in-time-2011-r5-line-xvid-fusion_screenshot_4.jpg"><img class="second-img" width="100%" height="100%" src = "http://sanyangfrp.com/data/out/805/511806414-play-button-png.png" /> </a>
</div>

使用CSS在缩略图上播放按钮

1 个答案: