带有响应式图像的背景叠加

Question

>我有一个带有背景叠加的图像，需要响应屏幕设备。

bg 过度需要保持全宽，但放置 100% 宽度只会在小型设备上产生溢出，而在大型设备上产生下溢。

感谢您的帮助。

请看我的js小提琴

.col-md-3{
    width:30%;
}
img{
    width:100%;
}
.brand-category{
    position: relative;
}
.brand-text{
    position: absolute;
    background-color: rgba(130,130,130,0.5);
    font-weight: 100;
    font-size: 0.9em;
    color: #fff;
    text-align: center;
    bottom: -10px;
    padding: 5px;
}

Answer 1

填充与

溢出

<div class="col-md-3 brand-category">
  <p class="brand-text"><span>Category</span></p>
  <a href=""><img src="http://paulobriendesign.com/img/paul-obrien.jpg" class="img-responsive" alt=""></a>
</div>

.css

.col-md-3{
  width:30%;
}
img{
  width:100%;
}
.brand-category{
  position: relative;
}
.brand-text{
  position: absolute;
  width: 100%;
  background-color: rgba(130,130,130,0.5);
  font-weight: 100;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  bottom: -10px;
}
.brand-text span {
  display: block;
  margin: 5px;
}

http://jsfiddle.net/XWfN4/

Answer 2

只需将display:block;添加到您的img CSS 中

即可

img{
    width:100%;
    display:block;
}

演示没有

演示方式