Question

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

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的任何跨浏览器方式来做到这一点？

Answer 1

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

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

1 个答案: