Есть ли разница между фоном-клипом и фоном-происхождением?

Объявления CSS3 background-clip и background-origin, похоже, оказывают такое же влияние на фон. Оба они, как представляется, ограничивают фон определенной областью относительно элемента HTML, поэтому мне было интересно, действительно ли разница в функции этих двух объявлений.

Ответы

Ответ 1

В соответствии с MDN:

Свойство CSS background-clip указывает, является ли элемент фон, цвет или изображение, простирается под его границей.

а

Свойство CSS background-origin определяет фон область позиционирования, то есть положение начала изображения указанный с использованием свойства CSS фона.

Оба свойства имеют три варианта: border-box, padding-box и content-box. Свойство background-origin определяет, где находится фон (по умолчанию используется отступы), а background-clip определяет, какая часть фона отображается (по умолчанию используется граница). Свойства могут использоваться вместе или независимо.

Некоторые примеры могут быть полезны:

Фон-происхождения

  • Значение фона - border-box - Обратите внимание, что фоновое изображение слегка сдвинуто вверх и влево, так что начало его позиции находится под граница границы (граница была сделана прозрачной, чтобы помочь визуализировать это).
  • Значение фона - padding-box (по умолчанию). Поскольку значение padding-box является значением по умолчанию, это должно выглядеть так же, как пример по умолчанию.
  • Значение фона - content-box - обратите внимание на то, что фоновое изображение слегка сдвинуто вниз и направо, так что начало его позиции - это область содержимого div, который определяется дополнением, применяемым к div.

Фон-клип

  • Фоновый клип установлен на border-box (по умолчанию). Здесь нет отличия от примера по умолчанию, поскольку исходное изображение фона - это поле заполнения (по умолчанию) и фоновый клип установлен на border-box (по умолчанию). В этом случае изображение не обрезается, поскольку оно помещается в рамку.
  • Фоновый клип, установленный на padding-box - Здесь нет отличия от примера по умолчанию, поскольку исходное изображение фона - это поле заполнения (по умолчанию) и фон -clip установлен на отступы. Как и в предыдущем примере, изображение не обрезается, так как оно помещается в поле заполнения.
  • Фоновый клип, установленный на content-box - Здесь вы можете видеть, что фон обрезается, поскольку отступы, применяемые к div, создают небольшую область содержимого. Происхождение фонового изображения по-прежнему является дополнением.

Фоновый клип и фон-источник, используемые вместе

  • Фоновый клип установлен на padding-box и background-origin установлен на content-box (оба значения, отличные от значения по умолчанию) - здесь вы можете увидеть начало изображение было настроено на контент-бокс, чтобы он нажал вниз и оставил от него нормальное положение в дополнении div. Затем фоновый клип был установлен в поле отступов, чтобы изображение не отображалось под нижней или правой рамкой (если бы оно было установлено в рамку).

Ответ 2

Из CSS3.info:

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

Свойство background-clip используется для определения того, распространяется ли фон на границу или нет.

Ответ 3

Прочтите это: http://www.css3.info/preview/background-origin-and-background-clip/

'background-clip' - это фон, который находится в поле, дополнении или что-то еще!

'background-origin' используется для вычисления положения определенного фона на определенной границе, дополнении или что-то еще!

Ответ 4

Эта матрица демонстрирует разницу и когда обе эффективны:

http://codepen.io/anon/pen/RNVKvj

HTML

<h3>Image size default - origin has no impact</h3>
<div class="box box4" > <span>clip:border<br>
  origin:any</span> </div>
<div class="box box1"> <span>clip:padding<br>
  origin:any</span> </div>
<div class="box box7"  > <span>clip:content<br>
  origin:any</span> </div>
<br clear="all"/>
<h3>Image position top, left</h3>
<div class="positioned">
  <div class="box box4"> <span>clip:border<br>
    origin:border</span> </div>
  <div class="box box5"> <span>clip:border<br>
    origin:padding</span> </div>
  <div class="box box6"> <span>clip:border<br>
    origin:content</span> </div>


  <div class="box box1" style="clear:both;"> <span>clip:padding<br>
    origin:border</span> </div>
  <div class="box box2"> <span>clip:padding<br>
    origin:padding</span> </div>
  <div class="box box3"> <span>clip:padding<br>
    origin:content</span> </div>


  <div class="box box7" style="clear:both;"> <span>clip:content<br>
    origin:border</span> </div>
  <div class="box box8"> <span>clip:content<br>
    origin:padding</span> </div>
  <div class="box box9"> <span>clip:content<br>
    origin:content</span> </div>
</div>
<br clear="all"/>

<h3>Image size "contained"</h3>
<div class="contain">

  <div class="box box4"> <span>clip:border<br>
    origin:border</span> </div>
  <div class="box box5"> <span>clip:border<br>
    origin:padding</span> </div>
  <div class="box box6"> <span>clip:border<br>
    origin:content</span> </div>


  <div class="box box1" style="clear:both;"> <span>clip:padding<br>
    origin:border</span> </div>
  <div class="box box2"> <span>clip:padding<br>
    origin:padding</span> </div>
  <div class="box box3"> <span>clip:padding<br>
    origin:content</span> </div>


  <div class="box box7" style="clear:both;"> <span>clip:content<br>
    origin:border</span> </div>
  <div class="box box8"> <span>clip:content<br>
    origin:padding</span> </div>
  <div class="box box9"> <span>clip:content<br>
    origin:content</span> </div>
</div>

CSS

.box{ background:url(http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center center;  
  width:300px;
  height:300px;  
  border:solid 25px rgba(0,0,0,0.5);  
  padding:25px;
  float:left;
  margin-right:5px; margin-bottom:5px;
  box-sizing:border-box;

}
.contain .box{  
  background-size: contain;
}
.positioned .box{  
  background-position:top left;
}
.box span{color:#fff; text-align:center; display:block; font-size:20px; font-weight:bold; height:100%; background-color:rgba(256,256,256,0.5);}

.box1{
  background-clip:padding-box;
  background-origin:border-box;
}

.box2{
  background-clip:padding-box;
  background-origin:padding-box;
}

.box3{
  background-clip:padding-box;
  background-origin:content-box;
}

.box4{
  background-clip:border-box;
  background-origin:border-box;
}

.box5{
  background-clip:border-box;
  background-origin:padding-box;
}

.box6{
  background-clip:border-box;
  background-origin:content-box;
}

.box7{
  background-clip:content-box;
  background-origin:border-box;
}

.box8{
  background-clip:content-box;
  background-origin:padding-box;
}

.box9{
  background-clip:content-box;
  background-origin:content-box;
}

Ответ 5

фон-происхождения

До этого свойства, когда мы добавили background-image в элемент, положение изображения начиналось с левой верхней части прокладки в нашем элементе. Исходное происхождение позволяет вам решить, где вы хотите отправной точкой исходного положения, границей или дополнением или содержание.

Новое свойство фонового происхождения имеет 3 значения в соответствии с коробка-модель:

border-box - положение фоновой позиции 0,0 точка вверху слева от границы. padding-box (по умолчанию) - положение фона положение 0,0 точки в верхнем левом углу прокладки. контент-бокс - для положение фоновой позиции 0,0 точки в верхнем левом углу содержание.

фон-клип

Используя фоновый клип, мы можем решить, где вырезать фоновое изображение и это то же самое, что и значения фона фона, как указано выше.

Новое свойство background-clip имеет 3 значения:

border-box (по умолчанию) - для отображения полного изображения, ничего не вырезает. padding-box - вырезать границу фонового изображения. content-box - разрезать border и padding background-image.

Взято из ссылки:
https://coderwall.com/p/h7dwaq/say-hello-to-background-origin-and-background-clip-css3-new-features