快乐编码！

Question

我觉得这是不可能的，但我想我还是会问。

<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背景图像作为其背景，而不是其父级的背景。

所以我的问题是：div有没有办法继承祖父母的背景，而不是父母的背景？

如果使用CSS无法做到这一点，我会接受javascript解决方案。

Answer 1

这将使用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);
});

这是小提琴：http://jsfiddle.net/gMK9G/

Answer 2

更新 DOM中的2个元素无法共享相同的背景图像，您可以应用背景图像并将它们精确定位，使其看起来像它们，但实际上它是不可能的。

据我所知目前无法实现，因为css只有继承并继承“父级”的“继承”，无法自定义。当然javascript可以很容易地做到这一点，我只提供一个jQuery示例，因为你有jquery标签。

$('.inherit-grandparent').each(function( element ) {
    var $this = $(this),
        property = $this.attr('grandparent-property'),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
});

<强>用法

<div class="inherit-grandparent" grandparent-property="background"></div>

演示：http://jsfiddle.net/aKHfr/

因此，这不仅可以解决您的问题，而且还是动态的，因此您可以在任何元素上使用它并请求任何属性。

<强>更新

这是一个jQuery插件版本，如果您愿意的话。

jQuery.fn.inheritGrandparent = function( property ) {
    var $this = $(this),
        value = $this.parent().parent().css(property);
    if(property && value) $this.css(property, value);
};

<强>用法：

$('#test').inheritGrandparent('background');

演示：http://jsfiddle.net/aKHfr/2/

~~快乐编码！~~

Answer 3

我认为你不能改变样式的继承方式，也就是说，你真的不需要这样做。

这有点粗糙，但您可以在儿童div上使用相同的图像，就像在身体上使用一样，只需使用背景定位来排列它。

<强> Working Example

body {
    background: url("Background 1");
}
#div1 {
    background: url("Background 2");
}
#child1 {
    background: url("Background 1");
    background-position: 0px -125px; /* adjust as needed */
}

Answer 4

我的 HTML：

  <div class="p1">
       <div class="p2">
         <div class="p3">
           GandSOn
         </div>
       </div>
    </div>

我的CSS：

    .p1 {
disapley: flex;
}

.p2{
display:inherit;
}

.p3 {
display:inherit;
}

如何继承祖父母CSS而不是父？

4 个答案:

快乐编码！