Разбираемся в CSS
Anonymous
Как сделать видео фоном для заголовка
Сообщение
Anonymous » 17 окт 2024, 08:43
Так можно ли визуализировать видео в качестве фона только для заголовка, если видео воспроизводится внутри рамки?
И также h1 должен быть перед видео.
Это так? даже возможно? Я пытаюсь понять это часами...
Код: Выделить всё
* {
box-sizing: border-box;
}
body {
background-color: black;
margin: 5px;
}
header h1{
position: absolute;
border: 1px solid black;
background-color: black;
padding: 2px;
left: 50%;
transform: translate(-50%);
}
header {
position: fixed;
font-family: Arial;
color: white;
height: 35%;
width: 98%;
margin: 10px;
border: 1px solid white;
background-color: black;
}
#head {
font-size: 5.5em;
font-weight: bold;
letter-spacing: 11px;
text-align: center;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
border: 1px solid white;
}
Спасибо за любую помощь!
Подробнее здесь:
https://stackoverflow.com/questions/542 ... the-header
1729143832
Anonymous
Так можно ли визуализировать видео в качестве фона только для заголовка, если видео воспроизводится внутри рамки? И также h1 должен быть перед видео. Это так? даже возможно? Я пытаюсь понять это часами... [img]https://i.sstatic.net/w1HXd .png[/img] [code]* { box-sizing: border-box; } body { background-color: black; margin: 5px; } header h1{ position: absolute; border: 1px solid black; background-color: black; padding: 2px; left: 50%; transform: translate(-50%); } header { position: fixed; font-family: Arial; color: white; height: 35%; width: 98%; margin: 10px; border: 1px solid white; background-color: black; } #head { font-size: 5.5em; font-weight: bold; letter-spacing: 11px; text-align: center; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; border: 1px solid white; }[/code] [code] EMINƎM [/code] Спасибо за любую помощь! Подробнее здесь: [url]https://stackoverflow.com/questions/54208390/how-to-have-video-as-background-for-the-header[/url]