html - 使用横幅图片发布底部阴影

Question

我正在尝试将底部阴影与顶部阴影对齐，但我似乎无法弄清楚。它唯一一次崩溃是当我使用开发人员工具栏在 css 文件中进一步删除 line-height 或 font-size 时，当然这也会影响其他所有内容。这是我的基本 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

答案其实很简单，你只需要使用一些巧妙的定位并利用父级的盒子模型:

.banner-image{
    position:relative;
}

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

这是您需要的公式:

• 取底部阴影的高度(某个值 x)
• 然后确保该元素的父元素具有“相对”位置(~重要~)
• 使底部阴影的位置“绝对”
• 将它放在底部减去它的高度值 (-x)

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