8

div サムネイル画像をいくつか取得しました。css (私の再生アイコンにはクラス名overlayiconがあります) を使用して、再生アイコンをサムネイル画像の上に配置する方法はありますか?

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id8" title="galaxy">
      <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

私のCSS：

.Item.ItemLeft, .Item.ItemMiddle, .Item.ItemRight
{
    float:left;
    margin-right:15px;
}
.clear
{
    clear:both;
}


img.ItemImage {
    width: 18em;
    height: 10em;
 }


.OverlayIcon {
    position: absolute;
    top: 40px;
    left: 65px;
}
4

4 に答える 4

5

で使用できposition: absoluteます.OverlayIcon。例えば：

.ImageLink {
    height: 300px;
    width: 350px;
    position: relative;
    display: block;
}
.ItemImage {
    height: 300px;
    width: 350px;
}
.OverlayIcon {
    position: absolute;
    top: 40px;
    left: 65px;
}

作業例: http://jsfiddle.net/shodaburp/9nEua/

user1788736 の最初のコメントに基づく更新

上記の解決策は、すべての高さが同じで固定されている場合にのみ機能します。次に、 playButton.png 寸法の高さに基づいてtopとの値を調整する必要があります。left

現在持っているもの (html、css、jQuery) の jsFiddle を提供できれば、位置をより正確に調整する方が簡単です。

user1788736 の 2 番目のコメントに基づく更新

サーバーに同じサイズ (56px x 37px) のダミー画像をアップロードしました。フィドルの更新版は次のとおりです: http://jsfiddle.net/shodaburp/k6yAQ/1/

user1788736 の 3 番目のコメントに基づく追加情報

「overlayicon w と h の値を見つける方法は?」と言うと、私はあなたが実際に を探していて、 の価値があると仮定topしleftます.OverlayIcon。私が間違っている場合は修正してください。

pxまず第一に、サイトにズーム/拡大を可能にする機能を持たない場合は、画像の測定単位として固執してください.

jsFiddle サム ディメンションに基づくと、12em x 10emは と同等192px x 160pxです。

topとのleft値を取得する式.OverlayIconは次のとおりです。

OverlayIconTop = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconTop = ( 160 - 37 ) / 2 = 61.5

(px には小数を使用できないため、61 または 62 に丸めます)

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight )/2
OverlayIconLeft = ( 192 - 56 ) / 2 = 68
于 2013-03-21T05:14:04.720 に答える
4 
.container{
   position: relative;
   width: 200px;
}

.container img{
   width: 200px;
}

.container .play-icon{
  cursor: pointer;
  position: absolute;
  top : 50%;
  left : 50%;
  transform: translate(-50%, -50%);
}

svg:hover #play-svg{
  fill: #CC181E;
}

【svgを使った実例】http://jsfiddle.net/4L2xea4u/

于 2015-03-20T18:37:56.597 に答える
1

サムネイル画像を背景として作成し、その上に再生ボタン画像を配置できます。また、a 属性をブロックとして定義して、領域全体をクリック可能にすることもできます。

于 2013-03-21T05:10:02.657 に答える
0

レスポンシブ レイアウトでこの問題に取り組んだところ、このデモに出会い、見事に機能しました。

于 2015-04-13T17:12:41.020 に答える