2

background-clip и background-origin - в чем разница? Спасибо.

1 ответ 1

4

Разница в следующем:

background-origin помещает фоновое изображение в соответствии со значением свойства.

background-clip ОБРЕЗАЕТ фоновое изображение или фоновый цвет в соответствии со значением свойства. Если фоновое изображение было прижато к внешнему краю border-а, то будет показана только та часть изображения которая находится внутри border (border-box) или внутри border+padding (content-box). Если задано значение padding-box, то будет вся картинка целиком.

В общем, пример тут: https://jsfiddle.net/q86uk2kh/embedded/result/

2
  • 1
    Я так понимаю, что при border-box будет показана вся картинка background-a (хотя ее часть будет не видима (Если border:solid с прозрачностью в 1), т.к. находится под border-ом). При padding-box будет обрезана часть картинки которая находится под border, а остальная часть картинки, которая находится в зоне padding и content будет видима. А при content-box обрезается вся часть картинки background-a кроме той, что находится в зоне контента. Я правильно понял?
    – hidd
    1 мар 2015 в 16:51
  • Совершенно верно. Только учтите, что это работает, если сочетать оба свойства background-origin: border-box; и background-clip.
    – mantigatos
    1 мар 2015 в 18:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.