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

HTML/CSS图像覆盖

  •  0
  • 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 年前
        1
  •  1
  •   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>
    

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

        2
  •  0
  •   Xarcell    12 年前

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

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

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

        3
  •  0
  •   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;
    }