css - 使绝对定位的嵌套子容器的宽度

Question

我实际上是在页面上显示横幅图片。在该图像的底部是一个带有半透明背景图像的叠加层(abs.pos.div)，以产生“透视”效果。除了宽度为 100% 的覆盖扩展到我的容器 div 之外，一切都正确定位并且工作正常。我试过将容器 div 的溢出设置为隐藏，但这似乎不起作用。我的父容器也有相对位置。这是响应式的，因此叠加层需要缩小和扩展到图像宽度。这是我的代码:

.hero-img-wrap {
  position: relative;
  margin-top: 35px;
  padding-left: 15px;
  padding-right: 15px;
}

.hero-img-wrap img {
  width: 100%;
  height: auto;
}

.hero-img-wrap .trans-overlay {
  position: absolute;
  bottom: 0;
  z-index: 9;
  height: 19px;
  background-image: url('../images/semi_transparent_white.png');
  width: 100%;
}

<div class="hero-img-wrap">
  <img src="images/banner_image.jpg" alt="">
  <div class="trans-overlay"></div>
</div>

我可以用 JQuery 来解决这个问题，但我想避免这种情况。对于它的值(value) - 此代码位于 Bootstrap 3 列中。

Answer 1

既然你已经定义了高度，为什么不用负值

position: relative;
top: -19px;

只是一个想法，这是给你的 fiddle

http://jsfiddle.net/g11yggap/