如何继承祖父母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>
- My
bodyelement uses a background image.我的body元素使用背景图像。 (I'll call it thebackbackground image)（我叫它back背景图片） -
div1uses a different background image (I'll call it thefrontbackground image), so thefrontbackground image covers over the main background image.div1使用不同的背景图像（我将其称为front背景图像），因此front背景图像覆盖了主背景图像。 - div1 contains a child div
child1that doesn't use any background images, so it just shows the background image of its parent ie it shows thefrontbackground.div1 包含一个不使用任何背景图像的子 div child1，因此它只显示其父级的背景图像，即它显示front背景。
I would like child1 to use the background of body and not the background of its parent div1 .我希望child1使用body的背景而不是其父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 .由于性质的back背景（这是一个图，而不是重复模式），我不能只适用back背景图像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.其实，我需要一种方法来使一个孔div1的背景，使child1得到back背景图像为背景，而不是它的父的背景。
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?所以我的问题是：div 有没有办法继承其祖父母的背景，而不是其父母的背景？
If this isn't possible with CSS, I'm open to javascript solutions.如果 CSS 无法做到这一点，我愿意接受 javascript 解决方案。
4 个解决方案
解决方案1
2 已采纳 2013-08-31 04:20:29
This would be with using javascript and jQuery:这将是使用 javascript 和 jQuery：
CSS CSS
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}
JS JS
$(function() {
function positionBackground() {
var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}
positionBackground();
$(window).resize(positionBackground);
});
Here is the fiddle: http://jsfiddle.net/gMK9G/这是小提琴： http : //jsfiddle.net/gMK9G/
解决方案2
0 2013-08-31 02:36:11
UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.
As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that.据我所知，这目前是不可能的，因为 css 只能从它的父母那里继承和继承“继承”，并且没有办法对其进行自定义。 Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.当然，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);
});
Usage用法
<div class="inherit-grandparent" grandparent-property="background"></div>
Demo: http://jsfiddle.net/aKHfr/演示： http : //jsfiddle.net/aKHfr/
So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.
Update:更新：
Here is a jQuery Plugin version, if you would prefer that.
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
};
Usage:用法：
$('#test').inheritGrandparent('background');
Demo: http://jsfiddle.net/aKHfr/2/演示： http : //jsfiddle.net/aKHfr/2/
Happy Coding!快乐编码！
解决方案3
0 2013-08-31 02:39:22
I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.我认为您无法更改样式继承的方式，也就是说，您真的不需要这样做。
This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.这有点粗糙，但您可以在子 div 上使用与在身体上使用相同的图像，只需使用背景定位将其对齐即可。
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
background-position: 0px -125px; /* adjust as needed */
}
解决方案4
0 2021-04-28 07:55:16
My HTML:我的 HTML：
<div class="p1">
<div class="p2">
<div class="p3">
GandSOn
</div>
</div>
</div>
My css:我的CSS：
.p1 {
disapley: flex;
}
.p2{
display:inherit;
}
.p3 {
display:inherit;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.