图像问题叠加

Question

需要一些图像叠加的帮助。我做了一个的jsfiddle http://jsfiddle.net/7upzLdee/1/

<div class="rss-output" style="float:"> 
<div class="body"> 
<div class="overlay-feed"></div> 
<div class="imagefix" style="float:none;"> 
<a target="_blank" href="#"> 
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a> 
</div> 
</div> 
</div> 

div.rss-output { 
float: left; 
width: 33.333%; 
position: relative; 
padding: 15px !important; 
overflow: hidden; 
} 

.rss-output .body { 
width: 100%; 
} 

.rss-output .overlay-feed { 
background: #000 none repeat scroll 0% 0%; 
z-index: 1; 
position: absolute; 
width: 100%; 
height: 200px; 
opacity: 0.5; 
} 

div.imagefix { 
height: 200px; 
line-height: 250px; 
overflow: hidden; 
text-align: center; 
width: 100%; 
} 

div.imagefix img { 
margin: -50%; 
} 

我想不通为什么叠加将会在图像上的右侧。我尝试了很多东西，但没有运气。

所有帮助表示赞赏。

在此先感谢

Answer 1

添加position: relative为.rss-output .body

div.rss-output { 
 
    float: left; 
 
    width: 33.333%; 
 
    position: relative; 
 
    padding: 15px !important; 
 
    overflow: hidden; 
 
} 
 

 
.rss-output .body { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.rss-output .overlay-feed { 
 
    background: #000 none repeat scroll 0% 0%; 
 
    z-index: 1; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 200px; 
 
    opacity: 0.5; 
 
} 
 

 
div.imagefix { 
 
    height: 200px; 
 
    line-height: 250px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
div.imagefix img { 
 
    margin: -50%; 
 
}

<div class="rss-output" style="float:"> 
 
<div class="body"> 
 
    <div class="overlay-feed"></div> 
 
    <div class="imagefix" style="float:none;"> 
 
     <a target="_blank" href="#"> 
 
      <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

添加position:relative;身体，因为，当你一些元素上使用position:absolute;，它将忽略静的父母，因此，其宽度

div.rss-output { 
 
    float: left; 
 
    width: 33.333%; 
 
    position: relative; 
 
    padding: 15px !important; 
 
    overflow: hidden; 
 
} 
 

 
.rss-output .body { 
 
    width: 100%; 
 
    position:relative; 
 
} 
 

 
.rss-output .overlay-feed { 
 
    background: #000 none repeat scroll 0% 0%; 
 
    z-index: 1; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 200px; 
 
    opacity: 0.5; 
 
} 
 

 
div.imagefix { 
 
    height: 200px; 
 
    line-height: 250px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
div.imagefix img { 
 
    margin: -50%; 
 
}

<div class="rss-output" style="float:"> 
 
<div class="body"> 
 
    <div class="overlay-feed"></div> 
 
    <div class="imagefix" style="float:none;"> 
 
     <a target="_blank" href="#"> 
 
      <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

问题与覆盖宽度。

.rss-output .overlay-feed { 
    background: #000 none repeat scroll 0% 0%; 
    z-index: 1; 
    position: absolute; 
    width: 89%; 
    height: 200px; 
    opacity: 0.5; 
} 

做覆盖宽度89％。 fiddle