HTML/CSS圖像疊加

在網站上實現「播放視頻」功能。每個視頻內容項目可以具有不同的圖像。這些圖像中的每一個都具有相同的寬度，但可能有不同的高度（它們在上載時調整大小以保持寬高比以符合標準寬度要求）。HTML/CSS圖像疊加

的計劃是在用類似這樣的標記內容圖像的頂部顯示另一透明「播放按鈕」的形象：

  <div class="media"> 
       <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" > 
        <img src="PlayButton.png" alt="Click to Play" height="200" width="300" /> 
       </a> 
      </div>

這是非常相似的信道9如何做在他們的主頁。然而，這似乎認爲任何圖像都是標準的高度和寬度。是否有解決這個問題的其他方法？

本來忘記了。我們有一個預定義的寬度，但是，每個圖像可能有不同的高度。例如，相同的標記需要被用於支持以下圖象：

寬x高 400×200 400 X 300 400 X 400

播放按鈕需要在每個圖像中的中心位置。

來源

2010-10-25 Brian

嘿布萊恩，我敢肯定，作爲接受被標記誰花時間來回答你的問題將不勝感激的迴應，甚至對他們的答案的一個更好的球員。 – 2013-07-02 17:31:09

取而代之的是內部元素是<img>，您可以將其設置爲<div>，將playbutton作爲背景圖像進行設計，位於中央。

<div class="media"> 
    <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" > 
    <div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" /> 
    </a> 
</div>

你還需要知道縮略圖的大小，你仍然需要提供高度和寬度的DIV - 因爲你顯示縮略圖作爲背景圖像，你贏了不能自動將盒子縮放到合適的尺寸。但至少現在你的代碼可以設置高度和寬度的值，而不必擔心播放按鈕的形狀變得扭曲。（注：作爲背景圖片的播放按鈕可能應該放在單獨的樣式表中，而不是按照我的示例聲明爲內聯;我這樣做是爲了演示它與原始代碼的不同之處，而不是顯示最佳實踐）

來源

2010-10-25 16:07:58 Spudley

需要一些你的CSS，以確保工作的事情，但是這可以幫助你：

.media { 
    display: table; 
} 
.media img { 
    display: table-cell; 
    vertical-align: middle; 
    display: block; 
    margin: 0 auto; 
}

如果沒有，請你添加CSS，所以我可以撥弄它，並使其發生。

來源

2013-05-25 17:05:53 Xarcell

我會這樣做。

<div class="media"> 
    <a class="videoLink" href="#"></a> 
    <img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/> 
</div>

將縮略圖從鏈接中分離出來。我們希望鏈接出現在圖片的頂部，並且圖片可以展示<div class="media">的高度。

的CSS：

.media { 
    position: relative; 
} 

.videoLink { 
    display: block; 
    height: 100%; 
    width: 100%; 

    background-image: url(PlayButton.png); 
    background-position: center center; 

    position: absolute; 
    z-index: 2; 
}

來源

2013-05-25 17:22:04

HTML/CSS圖像疊加

回答

相關問題