background-clip
и background-origin
- в чем разница? Спасибо.
1 ответ
Разница в следующем:
background-origin
помещает фоновое изображение в соответствии со значением свойства.
background-clip
ОБРЕЗАЕТ фоновое изображение или фоновый цвет в соответствии со значением свойства. Если фоновое изображение было прижато к внешнему краю border-а, то будет показана только та часть изображения которая находится внутри border (border-box
) или внутри border+padding (content-box
). Если задано значение padding-box
, то будет вся картинка целиком.
В общем, пример тут: https://jsfiddle.net/q86uk2kh/embedded/result/
-
1Я так понимаю, что при border-box будет показана вся картинка background-a (хотя ее часть будет не видима (Если border:solid с прозрачностью в 1), т.к. находится под border-ом). При padding-box будет обрезана часть картинки которая находится под border, а остальная часть картинки, которая находится в зоне padding и content будет видима. А при content-box обрезается вся часть картинки background-a кроме той, что находится в зоне контента. Я правильно понял?– hidd1 мар 2015 в 16:51
-
Совершенно верно. Только учтите, что это работает, если сочетать оба свойства
background-origin: border-box;
иbackground-clip
. 1 мар 2015 в 18:03