如何继承祖父CSS没有父母？ [英] How to Inherit grandparent CSS not parent?
问题描述
我有一种感觉，这是不可能的，但认为我会问反正。
I have a feeling this won't be possible, but thought I'd ask anyway.
<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>
- 我的
体元素使用的背景图像。 （我会称之为回背景图片） -
DIV1使用不同的背景图片（我会称之为前背景图片），因此前背景图像覆盖了主要的背景图像。 - DIV1包含一个子格
child1不使用任何背景图像，所以它只是显示其母公司的背景图像，即它显示了前背景。 - My
bodyelement uses a background image. (I'll call it thebackbackground image) div1uses a different background image (I'll call it thefrontbackground image), so thefrontbackground image covers over the main background image.- div1 contains a child div
child1that doesn't use any background images, so it just shows the background image of its parent i.e. it shows thefrontbackground.
我想 child1 使用体而不是其父母的背景的背景 DIV1 。因为回背景的性质（这是一个图，不重复的图案），我不能只适用回背景图像 child1 。其实，我需要一种方法来使 DIV1 的背景了一个洞以 child1 得到回背景图片为背景，而不是它的父的背景。
I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.
所以我的问题是：有没有办法一个div可以继承其祖父的背景，而不是其母公司的背景
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?
如果这是不可能的CSS，我打开JavaScript的解决方案。
If this isn't possible with CSS, I'm open to javascript solutions.
推荐答案
这将与使用JavaScript和jQuery：
This would be with using javascript and 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);
});
下面是小提琴： http://jsfiddle.net/gMK9G/
这篇关于如何继承祖父CSS没有父母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
