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图像叠加

回答

相关问题