Увеличение размера фона в CSS заставляет фоновое изображение исчезать - PullRequest
Новая
       36

Увеличение размера фона в CSS заставляет фоновое изображение исчезать

0 голосов
/ 22 ноября 2018

вот что у меня есть: 

.slot {
  border: 1px solid;
  border-color: rgba(90, 90, 90, 1);
  height: 31px;
  background: url(https://i.imgur.com/r6ihXJe.png), rgba(150, 150, 150, 1);
  background-position-x: center !important;
  background-repeat: repeat-y, no-repeat !important;
}
<div class="slot" style="width:345px; background-size: 62px, auto;"></div>

Это результат:

слот с изображением bg

Теперь проблема возникает, когдасвойство background-size изменяется более чем на 62 пикселя.Например, когда оно становится 63px и более - фоновое изображение исчезает:

слот без изображения bg

Интересно, что если мы увеличим высоту div, то сможемимеют больший размер фона и все еще видят фоновое изображение.

Вот jsFiddle, который я сделал: https://jsfiddle.net/avc4y3h0/

Пожалуйста, помогите!

Редактировать: Кажется, я могу воспроизвести эту проблему только в Google Chrome, Avast Browser и Opera.Он отлично работает на Mozilla Firefox и Microsoft Edge.Не могу проверить на Safari.Также у меня есть ощущение, что это работало раньше на Chrome, и, возможно, это что-то недавнее?Но я не могу сказать наверняка.

Ответы [ 3 ]

0 голосов
/ 22 ноября 2018

Итак, вот мой дубль.

Вы задаете высоту фона 62px (вы дали auto, но он будет таким же, как ширина, потому что это квадратное изображение) и высоту div как 31px.Значит, высота вашего фона в два раза больше высоты элемента), и вы задали repeat-y для фона.

Это может быть побочным эффектом в CSS3.

Если фоновое изображение в два раза больше высоты (или ширины) элемента и повторяется в направлении у (или х), то фон не будет отображаться.

Я не думаю, что есть какая-то особая логика, которая была применена во время проектирования (функция CSS), чтобы заставить ее работать так:

Решение для вашего текущего сценария будет,

  1. Знайте, что auto, заданное в фоновом режиме, фактически равно ширине, и соответственно убедитесь, что background-height меньше, чем удвоенная высота элемента

или

Используйте no-repeat, если это соответствует вашему сценарию использования
0 голосов
/ 23 ноября 2018

Решение № 1: (Благодаря комментарию Temani Afif )

Следует использовать 100% вместо auto в свойстве background-size для значенияy:

background-size: 63px 100%;

Решение № 2:

Я пришел к этой идее благодаря ответу vishwaovi .

Мы можем использовать фоновое изображение, которое представляет собой линию размером 1 x 31 пикселей (или другой фиксированной высоты) вместо одного пикселя.

Затем мы можем установить размер фона с фиксированной высотойдля y:

background-size: 63px 31px;

И для свойства background-repeat необходимо установить значение no-repeat:

background-repeat: no-repeat;

Thisодно тоже подходит для меня, но, очевидно, первое решение с установкой значения y на 100% более простое.

0 голосов
/ 22 ноября 2018

Что на самом деле происходит - вы растягиваете одно пиксельное изображение до 63px, а растяжение в таком масштабе приводит к его исчезновению, поскольку браузер не может выполнить эту операцию.

Это специфичная для браузера реализация, есливы проверяете на Firefox, он будет работать нормально, а на Chrome он не работает.

Вы можете сделать то же самое - используя то же изображение в качестве фона (повторите x и y оба) потомка .slot (установите высоту), ширина и поля для этого ребенка)

...