Свойство background-color
Для установки стиля фона элемента в CSS можно использовать свойство background-color. Оно определяет цвет фона элемента. В данном примере мы устанавливаем черный цвет фона для элемента с классом .color_bg.
.color_bg{
background-color:#000;
}
Свойство color
Свойство color определяет цвет текста элемента. В данном примере мы устанавливаем белый цвет текста для элемента с классом .color_bg.
.color_bg{
background-color:#000;
color:#fff;
}
Свойство padding
Свойство padding устанавливает отступы внутри элемента. В данном случае мы устанавливаем отступы 10 пикселей сверху и снизу и 5 пикселей слева и справа для элемента с классом .color_bg.
.color_bg{
background-color:#000;
color:#fff;
padding:10px 5px;
}
Свойство box-shadow
Свойство box-shadow задает эффект тени вокруг элемента, который делает затемнение за пределами элемента. В данном случае мы создаем тень с помощью свойства box-shadow, чтобы создать визуальный эффект вокруг элемента с классом .color_bg.
.color_bg{
background-color:#000;
color:#fff;
padding:10px 5px;
box-shadow: 0 0 0 100vmax #000;
}
Свойство clip-path
Свойство clip-path устанавливает форму обрезки элемента. В данном случае мы используем форму, которая вырезает полосу на всю ширину экрана слева и затемняет ее. Мы устанавливаем это свойство для элемента с классом .color_bg.
.color_bg{
background-color:#000;
color:#fff;
padding:10px 5px;
box-shadow: 0 0 0 100vmax #000;
clip-path: inset(0 -100vmax);
}
Пример блока, фон которого выходит за границы блока с параметром position:relative
Заключение
Таким образом, мы можем создать фон, который будет выходить за рамки блока с параметром position:relative.
Закрепим описание свойств:
- Свойство background-color устанавливает серый цвет фона элемента, color устанавливает белый цвет текста.
- Свойство padding устанавливает отступы внутри элемента, в данном случае 10 пикселей сверху и снизу и 5 пикселей слева и справа.
- Свойство box-shadow задает эффект тени вокруг элемента, который делает затемнение за пределами элемента.
- Свойство clip-path устанавливает форму обрезки элемента, в данном случае используется форма, которая вырезает полосу на всю ширину экрана слева и затемняет ее.
