1

我试图将这个底部阴影排成顶部阴影，但我似乎无法将它弄出来。它崩溃的唯一一次是当我使用开发人员工具栏在 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>

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

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

谢谢！

在此处输入图像描述

4

2 回答 2

1

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

.banner-image{
    position:relative;
}

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

这是您需要的公式：

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

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

于 2012-09-24T09:05:49.713 回答
1

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

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

通常图像是一个内联块，并且因为它是内联的，所以它周围的空白被保留。

这是问题所在：http: //jsfiddle.net/3Kd3f/

这是完全相同的代码，只是将 display:block 添加到 img 标签：http: //jsfiddle.net/3Kd3f/1/

于 2012-10-25T14:02:33.243 回答