Избегайте div только для стиля на начальной загрузке 4

Question

<div class="container-fluid">
  <div class="row">
    <div id="div#1" class="item color col-md-6">
      col-md-6
    </div>
    <div id="div#2" class="item col-md-6">
      <div class="color">
        col-md-6
      </div>
    </div>
  </div>
</div>

.color {
  background-color: yellow;
}

В вышеприведенном примере к div # 1 применен класс цвета, и в результате весь div (растянутый до самого левого конца) получает стиль. Это работает только на больших экранах, поэтому вот скриншот.

https://codepen.io/vbcda/pen/dgLVPy

Мое намерение состоит в том, чтобы просто сохранить цвет фона в области содержимого и не доходить до края документа.

Одним из решений является использование другого div внутри, чтобы просто применить стили, как в div # 2.

Теперь я хочу, чтобы это было именно так, но я действительно не хочу использовать дополнительный div только для стилизации.

Я хочу избежать "дивитита". Что я могу сделать?

Answer 1

Используйте CSS background-clip, чтобы он не заполнял область заполнения ...

.color {
  background-color: yellow;
  background-clip: content-box;
}

https://codepen.io/anon/pen/LgvXOj