Как инициализировать начальную точку фонового изображения в css? - PullRequest
Новая
       0

Как инициализировать начальную точку фонового изображения в css?

0 голосов
/ 16 февраля 2020

Я хочу добавить фоновое изображение на мою веб-страницу. Изображение, которое я хочу использовать, имеет около 20% прозрачного заполнения со всех четырех сторон. Какой атрибут следует использовать, чтобы фоновое изображение имело подгонку по краям (избегая прозрачной части)? 

body{
    background-image: url("bg.png");
    background-size: 90%;
    background-repeat: no-repeat;
}

Ответы [ 2 ]

1 голос
/ 16 февраля 2020

Вы можете изменить размер фонового изображения и зафиксировать его по центру: 

body{
    background-image: url( "bg.png" );
    background-size: 60% 60%; /* 100% - 40% (top/left + bottom/right paddings) */
    background-position: center;
    background-repeat: no-repeat;
}
0 голосов
/ 16 февраля 2020

Для чего-то подобного я предпочитаю добавлять элемент контейнера на страницу и избегать использования body для фоновых изображений, когда мне нужно осуществлять конечный контроль над отображением и позиционированием. Это было бы моим решением:

JSFiddle

Разметка 

<body>
  <div class="container">
    <div class="media"></div>
  </div>
</body>

S CSS

body {
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  .media {
    width: 100%;
    height: 100%;
    transform: scale(1.4);
    background: {
      image: url("https://i.ytimg.com/vi/cYNlJYQI3Uw/maxresdefault.jpg");
      position: center center;
      size: cover;
      repeat: no-repeat;
    }
  }
}

Обратите внимание, что я использую сброс CSS для удаления автоматов c margin / padding на элементе body, и что я позволяю body заполнить все видовой экран.

Класс container заполняет элемент body с width и height, установленными на 100%. Я использую свойство CSS background-size, чтобы покрыть контейнер, затем я использую свойство transform, чтобы масштабировать container.

Есть много способов добиться этого эффекта. С другой стороны, использование свойства background-image в теге body позволит мне использовать background-size для масштабирования изображения, чтобы скрыть прозрачные отступы изображения, как вы описали, но сложнее центрировать изображение в контейнере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...