Clip background images css

background-clip

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

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за border-style (en-US) или border-image (en-US)); в противном случае граница скрывает разницу.

Синтаксис

/* Значения ключевых слов */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Глобальные значения */ background-clip: inherit; background-clip: initial; background-clip: unset; 

Значения

Фон распространяется до внешнего края границы (но под границей в z-порядке).

Фон распространяется до внешнего края отступа. Под границей фон не рисуется.

Фон закрашивается внутри (обрезается) поля содержимого.

text Экспериментальная возможность

Фон закрашивается внутри (обрезается) текста переднего плана.

Формальный синтаксис

background-clip =
# (en-US)

=
border-box | (en-US)
padding-box | (en-US)
content-box

Примеры

HTML

p class="border-box">The background extends behind the border.p> p class="padding-box">The background extends to the inside edge of the border.p> p class="content-box">The background extends only to the edge of the content box.p> p class="text">The background is clipped to the foreground text.p> 

CSS

p  border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; > .border-box  background-clip: border-box; > .padding-box  background-clip: padding-box; > .content-box  background-clip: content-box; > .text  background-clip: text; color: rgba(0,0,0,.2); > 

Результат

Спецификации

Спецификация	Статус	Комментарий
CSS Backgrounds and Borders Module Level 3 Определение ‘background-clip’ в этой спецификации.	Кандидат в рекомендации	Первоначальное определение.
CSS Backgrounds and Borders Module Level 4 Определение ‘background-clip’ в этой спецификации.	Редакторский черновик	Добавляет значение text .

Начальное значение	border-box
Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется	нет
Обработка значения	как указано
Animation type	повторяющийся список из

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Свойство clip-path создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
• Свойства фона: background , background-color , background-image
• Введение в блочную модель CSS

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS background-clip Property

Specify how far the background should extend within an element:

Definition and Usage

The background-clip property defines how far the background (color or image) should extend within an element.

Default value:	border-box
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.backgroundClip=»content-box» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
border-box	Default value. The background extends behind the border	Demo ❯
padding-box	The background extends to the inside edge of the border	Demo ❯
content-box	The background extends to the edge of the content box	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник