Как вертикально / горизонтально центрировать CSS-фоновое изображение с отступом - PullRequest
Новая
       18

Как вертикально / горизонтально центрировать CSS-фоновое изображение с отступом

0 голосов
/ 17 апреля 2019

У меня есть это, чтобы центрировать его по вертикали и горизонтали: 

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
}

Это работает, но сейчас я пытаюсь добавить отступы.Я хотел бы иметь отступы 10px или 20px со всех сторон, поэтому для мобильных устройств он имеет некоторые отступы.Я пробовал это: 

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
  background-origin: content-box;
  padding: 20px;
}

Но правая и нижняя часть пересекают область просмотра, поэтому происходит прокрутка, и она больше не центрируется.Я также пытался использовать маржу.Хотите знать, как заставить это работать.Я хотел бы использовать CSS background-image, если это возможно, вместо <img>.

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Добавить box-sizing:border-box;

html {
  width: 100%;
  height: 100%;
  background: url(http://www.fillmurray.com/460/300) center center no-repeat;
  background-origin: content-box;
  padding: 20px;
  box-sizing:border-box;
}
0 голосов
/ 17 апреля 2019

Это происходит потому, что в CSS по умолчанию используется метод определения размера блока содержимого. Это означает, что ширина = ширина содержимого + заполнение + граница и высота = высота содержимого + заполнение + граница .

Вы можете переключиться на метод определения размера рамки рамки, который включает отступы и границу по ширине и высоте. 

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
  background-origin: content-box;
  padding: 20px;

  box-sizing: border-box; /* switches to border-box method */
}

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

...