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圖像位於錨標記內的另一圖像

回答

相關問題