background-size в процентах, когда box-sizing имеет значение border-box

я пытаюсь создать сетку в div, используя фон. естественно, свойство background-size — это хороший способ создать сетку, где размер 10% создаст 10 равномерно расположенных ячеек в div, например:

div{
 width:200px;
 border:solid 1px black;
 background-size: 10% 1px;
 background-image: linear-gradient(to left, gray 1px,  transparent 1px);
}
<div>x</div>

однако мне также нужно, чтобы box-sizing был "border-box", потому что в противном случае блок занимает больше пикселей, чем указано в свойстве ширины. и это вызывает все виды хаоса в Chrome с размером фона в процентах, например:

div{background-color:white;}
#d1 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
    box-sizing:border-box;
}
#d2 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
}
<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>

обратите внимание, что в верхнем div (d1) отображается более 10 ячеек, несмотря на то, что каждая из них должна занимать 10% ширины div.

кажется, что это только проблема Chrome, но если у кого-то есть решение, сообщите мне.


css border-box background-size
person Vlad V    schedule 20.02.2017    source источник
comment
Под grid вы имеете в виду фоновый узор, верно?   -  person tao    schedule 20.02.2017
comment
Свойство background-size CSS определяет размер фоновых изображений. Размер изображения может быть полностью ограничен или только частично, чтобы сохранить его внутреннее соотношение. developer.mozilla.org/en/docs/Web/CSS/background- размер   -  person Rahul    schedule 20.02.2017
comment
да, я пытаюсь создать собственный индикатор выполнения, в котором шаблон bg создает равномерно разделенную сетку. тогда я смогу использовать js для изменения плотности сетки. но я определенно хочу использовать процент для указания ширины ячейки в сетке, потому что ширина полосы прогресса также может измениться.   -  person Vlad V    schedule 20.02.2017
comment
Узнал как. Понятия не имею, почему :)...   -  person tao    schedule 20.02.2017
comment
Firefox отображает оба правильно, для меня это похоже на ошибку Chromium.   -  person Stickers    schedule 20.02.2017

Ответы (3)


arrow_upward
1
arrow_downward

Я признаю, что никогда раньше не играл с этой штукой, но, похоже, вам нужно учитывать ширину 1px background-image. Теперь не спрашивайте меня, почему, но это просто работает. Протестировал его с разными процентами и ширинами. Если вам нужно почему, а не только как, вам придется самостоятельно копаться в документации W3C или ждите лучшего документированного ответа.

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background-size: calc(10% + 1px), 1px;
  background-image: linear-gradient(to left, gray 1px, transparent 1px);
  padding:5px;
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }
<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>

Ваше здоровье!

person tao    schedule 20.02.2017
comment
Впервые я попробовал с 10% - 1px, потому что это имело для меня смысл. Но в 200px было создано 11 ящиков. Поменяв % и width понял, что нужен + 1px. Действительно странно. - person tao; 20.02.2017
comment
хотя это не будет работать правильно в firefox или т.е.; Есть ли способ сделать это решением для Chrome, но оставить 10% для других браузеров? - person Vlad V; 20.02.2017
comment
Не уверен, они редко нужны. Буду искать и найду способ :). - person tao; 20.02.2017
comment
все в порядке, это можно сделать с помощью заголовка JS:stackoverflow.com/questions/4565112/ - person Vlad V; 20.02.2017

arrow_upward
0
arrow_downward

Проверьте штрих-код выполнения. Как это работает?

.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}
<div class="progress-bar"></div>

background-size: 40px 40px; означает ширину 40px и ширину 40px коробки. Как два width работают эффективнее? background-size Сначала поместите изображение, затем поместите промежуток. Фоновое изображение начнется с 0 to 40px, затем поместите пробел 40px, затем изображение 40px. Это бесконечность, пока не будет завершено полное width. Посмотрите на свой первый фрагмент background-size: 10% 1px;. Браузер визуализирует 10 пробелов от общего числа width, используя 1px ширину изображения.

Примечание. background-size будет работать, если вы установите background-image. В противном случае свойство background-size работать не будет.

Надеюсь, это поможет.

person Rahul    schedule 20.02.2017

arrow_upward
0
arrow_downward

Ответ Андрея Георгиу был действительно хорош, но не соответствовал всем браузерам и отличался на несколько пикселей в некоторых местах разделителя. Во всяком случае, вот более последовательный ответ, кажется, работает везде:

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }
<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>

person Vlad V    schedule 23.02.2017