Как добавить отступ к центрированному фоновому изображению в HTML-элементе - PullRequest
Новая
       35

Как добавить отступ к центрированному фоновому изображению в HTML-элементе

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

Прямо сейчас я делаю это: 

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

Изображение, скажем, 3000x1500px. Я хотел бы, чтобы он был центрирован с отступом 100px, и чтобы он уменьшал изображение, чтобы оно помещалось в центре (по вертикали и по горизонтали). Прямо сейчас заполнение ничего не делает, и я думаю, что изображение обрезается из-за его слишком большого размера. Я также не хочу использовать элемент <img>, только используя background-image в CSS.

Ответы [ 2 ]

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

Этот обновленный css может исправить вашу проблему (я уверен, что это будет работать для вас) 

html{
  margin:0px;
  padding:0px;
}
body{
  width: 100vw;
  height: 100vh;
  background: url(https://picsum.photos/1200/1200?image=0) center center no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box;
  background-size:calc(100% - 100px) calc(100% - 100px);
  margin:0px;
}

enter image description here

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

Вы можете рассмотреть фон на элементе body, а затем установить другой фон в html, чтобы избежать распространения фона и некоторых нежелательных эффектов 1 . Затем вы можете настроить background-size, чтобы уменьшить фон.

Использование cover: 

body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/cover no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box; /*don't show on the padding*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

Или 100% 100% (центрирование в этом случае будет бесполезным) 

body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/100% 100% no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  /*background-clip: content-box; no more needed*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

Также с contain

body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/contain no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  /*background-clip: content-box; no more needed*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

1 Первый код, примененный непосредственно к html: 

html {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/cover no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box; /*this will not work as expected*/
  padding: 50px;
}
...