1

我的背景有两个部分：一个重复的图案和一个在中心的固定图像 - 这样做是这样的：

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 的情况下做到这一点？

4

1 回答 1

0

有可能calc，看这里

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;
}
于 2012-11-05T10:20:16.663 回答