CSS 赋予子元素与祖父元素相同的背景。祖父母的背景由 Javascript 设置

Question

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

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

Answer 1

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

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

background-image: 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;
  }
}

如果您想从一个祖先继承多个级别，您可以inherit在所有这些级别上使用，但结果可能是不可取的：

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

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;
  }
}

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

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

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);
  }
}