Question

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

class Test: 
    def __init__(self, val): 
        self.a = val 

T = Test(10) 
T1 = T 
T1.a = 20 
print T.a + '__' + T1.a

我无法弄清楚为什么叠加层会越过右侧的图像。我尝试过很多东西，但没有运气。

所有帮助表示赞赏。

提前致谢

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: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%; }时，它会忽略静态父级，因此忽略其宽度

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

问题在于叠加宽度。

{{1}}

覆盖宽度为89％。fiddle

覆盖图像问题

3 个答案: