Question

我想在锚标记内放置两个图像，其中第二个图像是播放器按钮，应该放在第一个图像的顶部。锚标记存在于跨度内且无法更改。通常，页面的HTML结构不能更改。是否有可能实现这一目标？

这是我没有成功的尝试。

span.x {
  display: block;
  height: 40px;
  width: 40px;
}
.x img {
  width: 100%;
  height: 100%;
  .videoicon {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}

<span class="x">
      <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM"
         class="video-class" target="_blank">
        <img    src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px"    alt="Video">
       <img class="videoicon"     src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.p   ng/revision/latest?cb=20121111212438" data-pin-nopin="true">
      </a>  
    </span>

修改有许多不同大小的span元素，如上所述，每次呈现页面时都应该在div中动态放置。所以，我无法使用硬编码的高度/宽度/顶部等值。

谢谢

Answer 1

您可以使用positioning实现这一目标。使包装器跨度position: relative根据包装器生成子位置。现在只需将position: absolute; top:0;（或符合您需求的值）添加到第二张图片：

＆＃13;

span.x {
  display: block;
  position: relative;
  height: 40px;
  width: 40px;
}
.x img {
  width: 100%;
  height: 100%;
}
.videoicon {
  position: absolute;
  top: 0;
}

＆＃13;

<span class="x">
  <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
   <img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px" alt="Video" />
   <img class="videoicon"  src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
  </a>  
</span>

＆＃13;

出于演示目的，我在上面的代码段中将您的LESS转换为CSS。以下代码将是您的LESS：

span.x {
    display: block;
    position: relative;
    height: 40px;
    width: 40px;
}

.x img {
    width: 100%;
    height: 100%;

    .videoicon {
        position: absolute;
        top: 0;  
    }
}

Answer 2

这可能会对您有所帮助，如果videoicon具有固定的高度和宽度，您可以按calc(50% - half of videoicon's height)设置其位置，即calc(50% - 20px)

＆＃13;

span.x {
  display: block;
  position: relative;
  height: 220px;
  width: 220px;
}
.x img {
  width: 100%;
  height: 100%;
}
.x .videoicon {
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  height:40px;
  width:40px;
}
.small{
  margin-top:20px;
height:100px!important;
width:100px!important;
}

＆＃13;

<span class="x">
  <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
   <img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px" alt="Video" />
   <img class="videoicon"  src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
  </a>  
</span>
<span class="x small">
  <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
   <img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px" alt="Video" />
   <img class="videoicon"  src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
  </a>  
</span>

＆＃13;

Answer 3

这是我编辑某些部分的代码

＆＃13;

<html>
    <head>
    <style>
    span.x {
    display:block;  
    height:100%;
    width:100%;
 }
    .x >img
 {
    width: 100%;
    height:100%;
}
.videoicon{
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 0;
  width: 50px;
  z-index: 1000;
  overflow: hidden;
  right: 0;  
}
#img11{
width:100%;
height:100%;	
}
    </style>
    </head>
    <body>
    <span class="x">
      <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM"
         class="video-class" target="_blank">
        <img id="img11" rc="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video">
       <img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true">
      </a>  
    </span>
    </body>
    </html>

＆＃13;

CSS图像位于锚标记内的另一个图像之上

3 个答案: