Background-color: rgba() поверх <video>

@евгенийпро · Регистрация: 15.10.2015

Студворк — интернет-сервис помощи студентам

При изменении ширины страницы меняется высота тега <video> и расположение (top от -120 до 145px).
Как пустить поверх него затемненную область(background-color: rgba) так, чтобы она(затемненная область) постоянно покрывала <video>???

Добавлено через 15 минут
Можно ли как-то по другому решить проблему?

@Htext · 26.08.2017, 17:49

Ну, как вариант - поместить тег video в тег div, задать последнему position:relative. Поместить также еще один div, задать position:absolute. Фон у второго тега div - через rgba с нужной степенью прозрачности. Второй див растянуть по всей щирине первого div (через margin:auto, по-моему).

@Alexey8888 · 26.08.2017, 18:27

HTML5
1
2
3
<div class="video-bg">
    <video src="#"></video>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.video-bg
  height: 100vh
  width: 100vw
  position: relative
  &::before
     content: ''
     display: block
     position: absolute
     width: 100%
     height: 100%
     top: 0
     left: 0
     background-color: rgba(255,255,255,.4)
     z-index: 1 
.video-bg > video 
  position: absolute
  z-index: -100
  top: 0
  left: 0   
  width: 100%
  height: 100%

@евгенийпро · 26.08.2017, 20:02 **[ТС]**

Alexey8888, то что надо!

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@евгенийпро 9 / 9 / 5 Регистрация: 15.10.2015 Сообщений: 383

	Background-color: rgba() поверх <video> 26.08.2017, 17:19. Показов 2676. Ответов 3 Метки нет (Все метки) При изменении ширины страницы меняется высота тега <video> и расположение (top от -120 до 145px). Как пустить поверх него затемненную область(background-color: rgba) так, чтобы она(затемненная область) постоянно покрывала <video>??? Добавлено через 15 минут Можно ли как-то по другому решить проблему? 0

@Htext 365 / 124 / 22 Регистрация: 08.01.2015 Сообщений: 1,418 Записей в блоге: 2
	26.08.2017, 17:49
	Ну, как вариант - поместить тег video в тег div, задать последнему position:relative. Поместить также еще один div, задать position:absolute. Фон у второго тега div - через rgba с нужной степенью прозрачности. Второй див растянуть по всей щирине первого div (через margin:auto, по-моему). 0

@евгенийпро 9 / 9 / 5 Регистрация: 15.10.2015 Сообщений: 383
	26.08.2017, 20:02 [ТС]
	Alexey8888, то что надо! 0

Background-color: rgba() поверх <video>

Решение