CSS 为子元素提供与祖父元素相同的背景。祖父母的背景由Javascript设定

Question

这可能只有在JS中才能实现。我正在为一个页面进行响应式设计。仅当最大宽度为768px时，我需要一个子元素与其父元素具有相同的背景图像。需要注意的是，家长的背景图像是由JavaScript根据用户点击的内容设置的

@media all and (max-width: 768px) {
    // background-image: inherit from grandparent?
}

Answer 1

要从父元素继承属性的值，可以使用inherit关键字：

如果属性的级联值是inherit关键字，则继承的值将成为属性的指定值和计算值。

background-image: inherit;

var el = document.querySelector('#target'),
    bg = 'linear-gradient(to right, #ff0 33%, #0ff 33%, #0ff 66%, #f0f 66%)';
el.style.backgroundImage = bg;

div {
  padding: 20px 20%;
}
@media all and (max-width: 768px) {
  p {
    border: 5px solid black;
    background-image: inherit;
  }
}

<div id="target"><p>Hello</p></div>

如果您想从上级继承多个级别，您可以在所有级别上使用inherit，但结果可能不理想：

var el = document.querySelector('#target'),
    bg = 'linear-gradient(to right, #ff0 33%, #0ff 33%, #0ff 66%, #f0f 66%)';
el.style.backgroundImage = bg;

div {
  padding: 20px 20%;
  background-image: inherit;
}
@media all and (max-width: 768px) {
  p {
    border: 5px solid black;
    background-image: inherit;
  }
}

<div id="target"><div><div><p>Hello</p></div></div></div>

或者，如果浏览器支持不是问题，您可以使用CSS变量：

el.style.setProperty('--bg', bg);

background-image: var(--bg);

var el = document.querySelector('#target'),
    bg = 'linear-gradient(to right, #ff0 33%, #0ff 33%, #0ff 66%, #f0f 66%)';
el.style.setProperty('--bg', bg);

div {
  padding: 20px 20%;
}
#target {
  background-image: var(--bg);
}
@media all and (max-width: 768px) {
  p {
    border: 5px solid black;
    background-image: var(--bg);
  }
}

<div id="target"><div><div><p>Hello</p></div></div></div>