如何继承祖父CSS没有父母？

问题描述：

我有一种感觉，这是不可能的，但认为我会问反正。

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 body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.

我想 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");
}

$(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没有父母？

相关推荐