gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:56:54 25 4
gpt4 key购买 nike

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

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 的情况下执行此操作?

最佳答案

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

关于html - 屏蔽相对于其父级居中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13228528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com