Фон-клип - CSS-хитрости

Anonim

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

.frame ( background-clip: padding-box; )

Значения

  • border-boxзначение по умолчанию. Это позволяет фону расширяться до внешнего края границы элемента.
  • padding-box обрезает фон по внешнему краю заполнения элемента и не позволяет ему выходить за границу.
  • content-boxобрезает фон по краю поля содержимого.
  • inheritприменяет background-clipнастройку родителя к выбранному элементу.

Демо

background-clip лучше всего объяснить в действии, поэтому мы собрали две демонстрации, чтобы показать, как это работает.

В первой демонстрации у каждого div есть один абзац внутри. Абзац - это содержимое div. Каждый div имеет желтый фон и 5-пиксельную полупрозрачную голубую границу.

См. Клип «Pen background-clip» от CSS-Tricks (@ css-tricks) на CodePen.

По умолчанию или при background-clip: border-boxустановленном значении желтый фон простирается до внешнего края границы. Обратите внимание, как граница выглядит зеленой из-за желтого фона под ней.

Когда background-clipизменяется на padding-box, цвет фона останавливается там, где заканчивается заполнение элемента. Обратите внимание, что граница синяя, потому что фон не может выходить за пределы границы.

С background-clip: content-box, цвет фона применяется только к содержимому div, в данном случае к одному элементу абзаца. Отступы и граница div не имеют цвета фона. Но стоит упомянуть одну небольшую деталь: цвет распространяется на поля содержимого. Проверьте различия между первым и вторым примерами с помощью content-box.

В первом content-boxпримере к абзацу применяются поля браузера по умолчанию, а фоновые клипы обрезаются после поля. Во втором примере для поля в CSS установлено значение 0, а фон обрезается по краю текста.

Следующее интерактивное шоу background-clipс фоновым изображением. Содержимое этой демонстрации - это пустой div меньшего размера.

См. Интерактивный пример Pen background-clip от Тимоти Миллера (@tjacobdesign) на CodePen.

Эта демонстрация также применяется background-size: coverи background-repeat: no-repeatв дополнение к background-clipуправлению фоновым изображением, которое в противном случае повторялось бы до отсечения.

Текст

Существует версия с префиксом производителя, которая работает для обрезки фона текста. Чтобы увидеть эту работу, текст также должен быть прозрачным. К счастью, есть еще одно свойство цвета текста с префиксом поставщика, которое можно эффективно переопределить color, что делает его безопасным в использовании, поскольку может иметь запасной вариант:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome и Safari поддерживают это.

См.
Текст Pen Lit Криса Койера (@chriscoyier)
на CodePen.

Связанный

  • фоновое приложение
  • фоновый цвет
  • фоновая картинка
  • фон-происхождение
  • фоновая позиция
  • фон-повтор
  • размер фона

Дополнительные ресурсы

  • background-clip в спецификации CSS3
  • фоновый клип на MDN
  • Коробочная модель CSS

Поддержка браузера

Все чисто!

Хром Сафари Fire Fox Опера IE Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Работает