无法在图像顶部添加背景而不会使图像溢出

Question

我已经尝试了一段时间来弄清楚如何在我正在浏览的网站上为图片添加叠加效果。我似乎无法让叠加层不会流过图像。我使用Bootstrap 3进行网格布局。

这是我的HTML

    <div id="feature-section" class="row hidden-xs">
                <div class="col-sm-6 feature-desktop">
                    <div class="">
                        <img src="img/feature_img.jpg" alt="">
                    </div>
                    <div class="feature-text">
                        <h3 class="feature-section">For Business Owners</h3>
                        <p class="feature-title">Week in Review: $1 Trillion, Moelis and Nasdaq</p>
                        <hr class="feature-rule">
                        <ul class="feature-tags">
                            <li class="feature-tag">Business Owners,</li>
                            <li class="feature-tag">Negotiation</li>
                        </ul>
                    </div>
                </div>
            </div> <!-- END #feature-section .row -->

相应的CSS（减去bootstrap的东西）

    .feature-desktop {
    position: relative;
    }

    .feature-text {
    background: url("../img/lg-pattern.png") rgba(255,255,255, 0.5) repeat;
    padding: 13px 20px;
    width: 100%;
    position: absolute; 
    bottom: 0;
    } 

我认为这是因为包含div的宽度大于图像。但我不确定如何解决它。

提前致谢，

Answer 1

这是一个需要对标记进行一次更改的解决方案（删除图像周围的容器）。不幸的是，我没有看到解决问题的简洁方法，而没有触及HTML。

http://jsfiddle.net/g8BEW/

<强> CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#feature-section {
    width: 430px;
    overflow: auto;
}

.feature-desktop {
    float: left;
    position: relative;
}

.feature-text {
    background: url("//placehold.it/5x200") rgba(255,255,255, 0.5) repeat;
    padding: 13px 20px;
    width: 100%;
    position: absolute; 
    bottom: 0;
}

<强> HTML

<div id="feature-section" class="row hidden-xs">
   <div class="col-sm-6 feature-desktop">
     <img src="//placehold.it/400x600" alt="">
     <div class="feature-text">
       <h3 class="feature-section">For Business Owners</h3>
       <p class="feature-title">Week in Review: $1 Trillion, Moelis and Nasdaq</p>
       <hr class="feature-rule">
       <ul class="feature-tags">
         <li class="feature-tag">Business Owners,</li>
         <li class="feature-tag">Negotiation</li>
       </ul>
     </div>
   </div>
</div>