Question

我基本上在页面上显示横幅图片。在该图像的底部是一个叠加（abs.pos.div）和一个半透明的背景图像，以制作一个＆＃34;透视＆＃34;影响。一切都正确定位并且工作正常，但宽度为100％的覆盖层扩展到我的容器div之外。我已经尝试将溢出设置为隐藏容器div，但这似乎不起作用。我的父容器也有一个相对位置。这是响应性的，因此需要缩小和扩展到图像宽度。这是我的代码：

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

我的css：

.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%;
}

我可以用JQuery来解决这个问题但是我想避免这种情况。任何帮助将不胜感激。对于它可能值得的东西 - 这段代码在Bootstrap 3列中。

谢谢！

Answer 1

由于您已经定义了高度，为什么不是负值

position: relative;
top: -19px;

只是一个想法，继承人是你的小提琴

http://jsfiddle.net/g11yggap/

Answer 2

尝试

宽度：继承;
在叠加div

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

2 个答案: