Наложить эффект на фон

@kirill1059 · Регистрация: 16.04.2013

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

Добрый день.
На сайте располагается фоновое видео, нужно на него наложить такой эффект как на картинке, то есть перекрыть его полупрозрачным фоном.
Можно ли это сделать с помощью HTML и CSS?
Спасибо
https://www.cyberforum.ru/atta... 1434129777

@evikza · 12.06.2015, 20:46

да, конечно

для этого существует z-index (это грубо говоря слои) чем выше значение z-index, тем выше расположен слой на странице, верхний слой в данном случае описывается как прозрачный цвет:

HTML5
1
background-color: rgba(0, 0, 0, 0.60);

вот пример, думаю разберетесь

http://codepen.io/evikza/pen/pJwqYW

@kirill1059 · 14.06.2015, 15:19 **[ТС]**

evikza, Спасибо, с изображением понятно, вот только как с видео это сделать, не пойму.
Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Проект</title>
</head>
<body>
<video class = "videos" src = "video/video.mp4" autoplay controls></video>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
body {
    background: black;
    margin: 0;
    padding: 0;
}
 
.videos {
    width: 100%;
    height: 100%;
}

@evikza · 14.06.2015, 19:25

kirill1059, вот

http://codepen.io/evikza/pen/PqKqRm

я там оставил пояснения, сейчас все отображается на весь экран, по необходимости поменяете размер под себя

Новые блоги и статьи Все статьи Все блоги /
моя боль 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 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404

	Наложить эффект на фон 12.06.2015, 20:21. Показов 2797. Ответов 3 Метки нет (Все метки) Добрый день. На сайте располагается фоновое видео, нужно на него наложить такой эффект как на картинке, то есть перекрыть его полупрозрачным фоном. Можно ли это сделать с помощью HTML и CSS? Спасибо https://www.cyberforum.ru/atta... 1434129777 Миниатюры 0

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	14.06.2015, 19:25
	Сообщение было отмечено kirill1059 как решение Решение kirill1059, вот http://codepen.io/evikza/pen/PqKqRm я там оставил пояснения, сейчас все отображается на весь экран, по необходимости поменяете размер под себя 1

Наложить эффект на фон

Решение