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

我想将两个图像放在锚标记中，其中第二个图像是应该放置在第一个图像顶部的播放器按钮。定位标记存在于一个范围内并且不能更改。通常页面的HTML结构不能改变。有没有可能做到这一点？CSS图像位于锚标记内的另一图像

这是我没有成功尝试过的。

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>

EDIT 有不同尺寸的许多跨度元件像上面应该动态地每次呈现页面时被置于一个div内部。所以，我无法使用硬编码的高度/宽度/顶部等值。

谢谢

来源

2016-10-03 user2008973

所以这个跨度的高度为40像素是固定权 –

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

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; 
 
}

<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>

来源

2016-10-03 12:11:19

可以实现与positioning。使包装范围position: relative根据包装材料制作儿童位置。现在只需加position: absolute;与top:0;（或适合您的需要的值）到第二图像：

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

<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>

出于演示的目的，我转换了您少CSS在上面的代码片段。下面的代码将是你的LESS：

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

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

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

来源

2016-10-03 10:30:50 andreas

非常感谢你。 Iam不确定通过添加相对于跨度，它将工作，因为每次页面呈现时，具有不同大小的许多跨度被动态地放置在div中。你能否通过考虑跨度的高度和宽度是动态的来更新你的答案。每次页面呈现时都会决定。有图像越来越小，每次必须根据背景图像的大小来调整播放器图像的大小。再次感谢您的时间。 – user2008973

我已经更新了我最初的问题。谢谢！ – user2008973

这是你的代码中，我有编辑某些部分

<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%; \t 
 
} 
 
    </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>

来源

2016-10-03 10:40:52

非常感谢。请您考虑跨度的高度和宽度是动态的，以便更新您的答案。每次页面呈现时都会决定。有图像越来越小，每次必须根据背景图像的大小来调整播放器图像的大小。 – user2008973

我也相应地更新了我的最初问题。 – user2008973

如果你想动态使用宽度，高度和顶部，然后使用引导类来使它响应，否则使用JQuery给动态样式或类 –

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

回答

相关问题