gpt4 book ai didi

javascript - 如何继承祖 parent CSS而不是 parent ?

转载 作者:技术小花猫 更新时间:2023-10-29 11:40:37 25 4
gpt4 key购买 nike

我觉得这不可能,但我还是想问问。

<body>                  //body uses 'back' background
<div id="div1"> //div1 uses 'front' background
<div id="child1"> //child1: no backgrounds, so shows 'front' background
</div>
</div>
</body>
  • 我的 body 元素使用背景图片。 (我将其称为back 背景图片)
  • div1 使用不同的背景图片(我将其称为 front 背景图片),因此 front 背景图片覆盖了主要背景图片。
  • div1 包含一个不使用任何背景图像的子 div child1,因此它只显示其父级的背景图像,即它显示 front 背景。

我希望 child1 使用 body 的背景,而不是其父级 div1 的背景。由于 back 背景的性质(它是绘图,而不是重复图案),我不能只将 back 背景图像应用于 child1。我实际上需要一种方法在 div1 的背景中打一个洞,以便 child1 获得 back 背景图像作为其背景,而不是它的 parent 的背景。

所以我的问题是:div 是否可以继承其祖 parent 的背景,而不是其 parent 的背景?

如果 CSS 无法做到这一点,我愿意接受 javascript 解决方案。

最佳答案

这将使用 javascript 和 jQuery:

CSS

body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}

JS

$(function() {

function positionBackground() {

var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}

positionBackground();

$(window).resize(positionBackground);
});

这是 fiddle :http://jsfiddle.net/gMK9G/

关于javascript - 如何继承祖 parent CSS而不是 parent ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18543810/

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