Свойство background-clip
Задает поведение фона при наличии границы border и обрезает все, что выходит за рамки выбранного значения
background-clip: border-box;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
background-clip: border-box;
Фон будет расположен под границей border элемента
<style>
.example-1 {
width: 200px;
height: 200px;
border: 10px dashed #95bd55;
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-clip: border-box;
}
</style>
<div class="example-1"></div>background-clip: padding-box;
Фон не будет размещен под границей border элемента
<style>
.example-2 {
width: 200px;
height: 200px;
border: 10px dashed #95bd55;
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-color: #dd423a;
background-clip: padding-box;
}
</style>
<div class="example-2"></div>background-clip: content-box;
Фон элемента будет расположен строго под содержимым элемента
<style>
.example-3 {
width: 200px;
height: 200px;
padding: 20px;
border: 10px dashed #95bd55;
background-image: url(https://placem.at/places?w=200&h=200&txt=0&random=2);
background-clip: content-box;
}
</style>
<div class="example-3">Фон элемента будет расположен строго под содержимым элемента</div>Фон элемента будет расположен строго под содержимым элемента
background-clip: text;
Фон будет применен для текста элемента. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;
Данное значение экспериментальное и работает не во всех браузерах, а так же нужно указывать префикс -webkit-
<style>
.example-4 {
background: linear-gradient(#dd423a, #1947ec);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
<h2 class="example-4">Фон будет применен для текста элемента</h2>