Как работает background-size и background-repeat?

Question

Вот пример. Я хотел бы обрезать фоновое изображение, а затем использовать обрезанное изображение в качестве фона для большего (по размеру) элемента. Я имею в виду, что div больше, чем его фон, и мне не нужно повторение. Теперь когда background-repeat не комментируется, элемент исчезает. Но я предположил, что это покажет обрезанный неповторимый фон.

#div {
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  background-position: 0px -100px;
  background-size: 100px 100px;
  background-repeat: no-repeat;  /*comment this*/
  position: absolute;
}

<div id="div"></div>

Answer 1

background исчезает, когда background-repeat: no-repeat настройка добавлена ​​из-за позиции, которая назначена фону. Это установлено в 0px -100px относительно происхождения. Вы не установили никакого значения для background-origin и поэтому значение по умолчанию (то есть, padding-box будет использоваться), а высота изображения составляет всего 100 пикселей. Из-за этого, когда вы указываете браузеру не повторять изображение, в видимой области ничего нет.

Для случая, показанного в демонстрационном примере, изображение не нужно обрезать, потому что его размер составляет всего 100 x 100 (устанавливается с помощью background-size) и div размер коробки (вместе с padding 10 пикселей со всех сторон) больше, чем изображение (см. фрагмент ниже, чтобы увидеть это в действии).

Если вы хотите сказать, что хотите масштабировать изображение 600 x 400 в 100 x 100, используя background-size свойство и отображать его в пределах div тогда вы можете сделать это, как показано в самом фрагменте ниже.

.div {
  /*position: absolute; commented out for demo */
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  /*background-position: 0px -100px; - this makes it positioned above the viewable area of the box container, so remove it */
  background-size: 100px 100px;
  background-repeat: no-repeat;
  border: 1px solid red;  /* just to show how box is bigger than image */
}

/* If the image has to be centered within the div */
.div.centered { background-position: 50% 50%; }

/* Just for demo */
div{ margin: 10px;}

<div class="div"></div>
<div class="div centered"></div>

---

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

Здесь, указав background-position как -240px -140px часть изображения, которая присутствует в пределах координат (240,140) - (360,260) на изображении, будет отображаться внутри поля. Это показывает 120 x 120 пикселей изображения из-за размера коробки (включая отступы).

.div {
  position: absolute;
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  background-position: -240px -140px;
  background-repeat: no-repeat;
  border: 1px solid red;  /* just to show how box is bigger than image */
}

/* Just for demo */
div{ margin: 10px; }

<div class="div"></div>