8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Основной стиль для таблицы с изображением позади */ | ||
.table- | .table-with-background { | ||
position: relative; | position: relative; | ||
z-index: 1; /* Обеспечиваем, чтобы таблица была выше фона */ | |||
overflow: visible; /* Разрешаем элементам выходить за пределы таблицы */ | |||
} | } | ||
/* | /* Добавление фонового изображения через псевдоэлемент */ | ||
.table- | .table-with-background::before { | ||
content: ''; | content: ''; | ||
background-image: url('/ | background-image: url('/path/to/image.png'); /* Укажите путь к изображению */ | ||
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
top: | top: -50px; /* Смещение изображения вверх */ | ||
left: | left: -50px; /* Смещение изображения влево */ | ||
width: 100%; | width: calc(100% + 100px); /* Ширина изображения больше, чем ширина таблицы */ | ||
height: 100%; | height: calc(100% + 100px); /* Высота изображения больше, чем высота таблицы */ | ||
z-index: 0; | z-index: -1; /* Размещаем изображение позади таблицы */ | ||
opacity: 0.5; /* Опционально: прозрачность для лучшего эффекта */ | |||
border-radius: 10px; /* Опционально: скругление углов, если требуется */ | |||
} | } | ||