代码之家 › 专栏 › 技术社区 › Brian

HTML/CSS图像覆盖

image css html

Brian · 技术社区 · 14 年前

计划是使用如下标记在内容图像上方显示另一个透明的“播放按钮”图像:

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

这与第九频道在其主页上的做法非常相似。然而,这似乎假设任何图像都具有标准的高度和宽度。有没有其他解决方法?

400 x 200

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

3 回复 | 直到 14 年前

Spudley Pat 14 年前

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

(注意:作为背景图像的播放按钮可能应该在单独的样式表中,而不是像我的示例那样声明为内联;我这样做是为了演示它与原始代码的区别,而不是为了展示最佳实践)

Xarcell 12 年前

需要一些CSS来确保工作正常,但这可能会帮助您:

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

如果没有,请添加你的CSS,这样我就可以摆弄它,使它发生。

Mark Ryan Sallee 12 年前

我会这样做。

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

推荐文章