圖像問題疊加

需要一些圖像疊加的幫助。我做了一個的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%; 
}

我想不通爲什麼疊加將會在圖像上的右側。我嘗試了很多東西，但沒有運氣。

所有幫助表示讚賞。

在此先感謝

來源

2015-07-01 Joseph Zammit

添加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>

來源

2015-07-01 07:29:51 Dmitriy

是的，工作woohooo謝謝 –

添加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>

來源

2015-07-01 07:28:05

問題與覆蓋寬度。

.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

來源

2015-07-01 07:28:06

如果我這樣做，覆蓋去向何方，我需要它在圖像和相同尺寸的圖像下... –

不要覆蓋寬度89％ –

http://jsfiddle.net/sonam185/nvwpwdax/1/嘗試小提琴 –

圖像問題疊加

回答

相關問題