发布衬里底部阴影与横幅图像

Question

我试图将这个底部阴影排列在顶部阴影中，但我似乎无法将其拉出来。它崩溃的唯一时间是我使用开发人员工具栏在css文件中进一步删除行高或字体大小，但当然这也会影响其他所有内容。这是我的基本html结构：

<div class="banner-image">
  <div class="banner-image-wrapper">
    <div class="shadow-top"></div>
      <a class="header-image">
        <img />
      </a>
    <div class="shadow-bottom"></div>
  </div>
</div>

在标签上，如果我删除了字体大小和行高，那么一切都会很好地自行折叠，但我似乎无法在标签上强行执行此操作。

我知道一旦解决了，这将是一个荒谬的问题。

谢谢！

Answer 1

答案实际上很简单，你只需要使用一些聪明的定位＆amp;利用父母的盒子模型：

.banner-image{
    position:relative;
}

.shadow-bottom{
    position:absolute;
    height: x;
    bottom: -x;
}

以下是您需要的公式：

• 获取底部阴影的高度（某些值为x）
• 然后确保该元素的父元素具有'relative'（〜important~）
的位置
• 使底部阴影的位置为“绝对”
• 将它放在底部减去它的高度值（-x）

这是一个说明效果的jsFiddle：http://jsfiddle.net/k7CmJ/

Answer 2

我知道这是旧的，但是对于其他寻找答案的人来说，绝对定位不起作用，在img标签上设置display：block将摆脱这个空间：

.header-image > img {
    display:block;
}

通常情况下，图像是内联块，因为它是内联的，所以它周围的空白区域会被保留。

问题在于：http://jsfiddle.net/3Kd3f/

以下是完全相同的代码，仅将display：block添加到img标记：http://jsfiddle.net/3Kd3f/1/