屏蔽相对于其父级的居中图像

时间：2012-11-05 08:39:25

标签： html css

我的背景有两个部分：重复的图案和中心的固定图像 - 如下所示：

body {
    background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#center {
    position: fixed;
    height: 100%;
    width: 100%;
    background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat center center;
}
​
<body>
    <div id="center">&nbsp;</div>
    <div><!-- page content, br's here as example to show how #center is "fixed" --><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</body>

请参阅jsfiddle.net/Ps9JV。

我要做的是将固定图像保持在中央，但将其遮盖到身体左上角的300px x 300px正方形，如下所示。有没有javascript的任何跨浏览器方式来做到这一点？

1 个答案:

答案 0 :(得分：0)

calc可以使用here 

body {
    background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#c {
    position:fixed;
    width:100%;
    height:100%;
    margin: 50%;
}
#center {
    /* image is 450px x 300px */
    width: -moz-calc(525px - 50%);
    width: -webkit-calc(525px - 50%);
    width: -o-calc(525px - 50%);
    width: calc(525px - 50%);
    height: -moz-calc(450px - 50%);
    height: -webkit-calc(450px - 50%);
    height: -o-calc(450px - 50%);
    height: calc(450px - 50%);
    margin-top: -150px;
    margin-left: -225px;
    background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat top left;
}
相关问题
最新问题