Блог

Главная - Вопросы по программированию - Наследовать, но не отображать

Наследовать, но не отображать

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Есть ли какой-нибудь способ, которым я мог бы передать элемент стилю, но не использовать его сам?

Пример:

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

Комментарии:

1. кажется немного странным, что вы хотели бы этого. Какого эффекта вы добиваетесь?

2. background: bypass; В CSS такого нет

3. Пожалуйста, не задавайте лишних вопросов .

4. Лучше просто использовать дополнительный класс для one и three.

Ответ №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 фон inherit one , и вы можете изменить фон обоих, изменив значение переменной.

Комментарии:

1. Это не было бы наследованием, не так ли? Это то же самое, что просто снова установить фон в .three верно?

2. Да, но таким образом вы можете изменить фон обоих, просто установив значение для onebg . Это почти то же самое, что и наследование: вы устанавливаете фон one , и этот же фон используется внутри three .

Ответ №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>

Комментарии:

1. Это работает в некоторых случаях, но не дает прямого ответа на вопрос. Фоновый пример может не включать в себя фактический вариант использования.

2. @isherwood Фоновый пример может не включать фактический вариант использования -> у нас нет информации о фоновом использовании, поэтому это отвечает на вопрос, как указано, поскольку второй элемент не показывает ничего похожего на ожидаемый