html - 带有响应图像的背景叠加

Question

我有一张需要响应屏幕设备的背景叠加层图像。

bg 过度需要保持全宽，但设置 100% 宽度只会在小设备上造成溢出，在大设备上造成下溢。

感谢帮助。

请看我的js fiddle

.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/