Question

这可能只适用于JS。我正在为页面设计响应式设计。如果max-width是768px，我需要一个子元素才能拥有与它的父元素相同的背景图像。需要注意的是，父级的背景图像是由JavaScript根据用户点击的内容设置的。

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

Answer 1

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

如果属性的cascaded value是inherit 关键字，inherited value成为属性 specified和computed values。

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>

或者，如果browser support不是问题，您可以使用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>

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

1 个答案: