我有一张需要响应屏幕设备的背景叠加层图像。
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;
}
最佳答案
填充表溢出
<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;
}
关于html - 带有响应图像的背景叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22860216/