繼承但不顯示

Question

有什么方法可以讓元素傳遞樣式但不使用它本身？

例子：

<div class="one">
  <div class="two">
    <div class="three">

    </div>
  </div>
</div>

.one {
  background: url(image);
}
.two {
  background: inherit;
 !!! I want it to be passed down but not displayed here
}
.three {
  background: inherit;
}

Answer 1

是的，這是可能的，但不是這樣。 你可以引入一個變量：

CSS：

:root {
  --onebg: url(image);
}

.one {
  background: var(--onebg);
}

.two {
  background: <someOtherValue>;
}

.three {
  background: var(--onebg);
}

HTML：

<div class="one">
  <div class="two">
    <div class="three">
      ...
    </div>
  </div>
</div>

這樣你可以讓three繼承one的背景，你可以通過改變變量的值來改變兩者的背景。

Answer 2

使大小為0

 .one { background: url(https://picsum.photos/id/1/200/300); }.two { background: inherit; background-size: 0 0; }.three { background: inherit; background-size: initial;/* update the size here like you want */ } div { padding: 50px; height: 50px; border:1px solid red; }

 <div class="one"> <div class="two"> <div class="three"> </div> </div> </div>