CSSアンカータグ内の別の画像の上にある画像

アンカータグの内側に2つの画像を配置したい場合、2番目の画像は最初の画像の上に配置する必要があるプレーヤーボタンです。アンカータグはスパン内に存在し、変更できません。一般に、ページの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

ので、このスパンの高さは、 –

編集を持っているあなたのコードです高さと幅は、calc(50% - half of videoicon's height)、つまりcalc(50% - 20px)

でその位置を設定できます210

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にします。今だけ第二の画像にtop:0;（またはあなたのニーズに合った値）でposition: absolute;を追加します。デモンストレーションの目的のために

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を変換します。次のコードは、あなたの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

はどうもありがとうございました右の修正である40ピクセルです。ページがレンダリングされる度に異なるサイズのスパンがdiv内に動的に配置されるため、スパンに相対値を追加することで効果が得られるかどうかはわかりません。スパンの高さと幅が動的であることを考慮して答えを更新してください。ページがレンダリングされるたびに決定されます。背景画像の大きさに応じて、画像を大きくしたり、小さくしたり、プレーヤ画像のサイズを適応させなければならないたびに、あなたの時間をもう一度ありがとう。 – user2008973

私は最初の質問を更新しました。ありがとう！ – user2008973

これは私がvideoiconが固定している場合、これは、あなたを助けるかもしれないいくつかの部分

<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アンカータグ内の別の画像の上にある画像

答えて

関連する問題