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确实在他们的主页。 然而,这似乎假定任何图像是标准的高度和宽度。 是否有解决这个的替代方法?

忘了提原本。 我们有一个预定的宽度,事情将适合,但是,每个图像可以具有不同的高度。 例如,相同的标记需要被用于支持下面的图像:

宽×高400×200 400×300 400×400

播放按钮需要在每个图像为中心。

--------------解决方案-------------

相反,内部元件作为一个的<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>

你还需要知道缩略图的大小,因为你还是会需要提供高度和宽度的股利 - 因为你显示缩略图作为背景图片,你将不能够有中规模自动合适的尺寸。 但至少现在,你的代码可以设置高度和宽度的数值,而不用担心播放按钮的形状越来越扭曲。

(注意:播放按钮作为背景图片也许应该是在一个单独的样式表,而不是内联被声明为按我的例子,我没有这样说,这证明它是如何不同于原密码,而不是展现最佳实践)

需要一些你的CSS,以确保工作的事情,但是这可能会帮助你:

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

如果没有,请你加入CSS这样我就可以拨弄它,让它发生。

我不喜欢这样。

<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;
}

分类:HTML 时间:2015-03-15 人气:5
本文关键词: 图像,HTML,CSS
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.351 (s). 10 q(s)