1

背景には2つの部分があります。繰り返しパターンと、中央の固定画像です。次のように実行されます。

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を参照してください。

私がやろうとしているのは、固定画像を中央に保持することですが、下のように、本体の左上にある300pxx300pxの正方形にマスクします。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 に答える