Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
 Аватар для kirill1059
14 / 14 / 3
Регистрация: 16.04.2013
Сообщений: 404

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

12.06.2015, 20:21. Показов 2797. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день.
На сайте располагается фоновое видео, нужно на него наложить такой эффект как на картинке, то есть перекрыть его полупрозрачным фоном.
Можно ли это сделать с помощью HTML и CSS?
Спасибо
https://www.cyberforum.ru/atta... 1434129777
Миниатюры
Наложить эффект на фон  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
12.06.2015, 20:21
Ответы с готовыми решениями:

Наложить эффект на фоновый слайдер
Добрый день, уже как-то задавал похожий вопрос, но теперь он немного другой. Вместо фона стоит слайдер с картинками. Нужно наложить...

Можно ли точно наложить картинку на такой же фон?
Есть две картинки img1 and img2 одного размера. 1) Можно ли задать каринке img1 фон=img2. 2) img1 сделать полупрозрачной. ...

Как наложить на картинку прозрачный фон и текст?
вот css картинки .curved-hz-1 { position:relative; width: 700px; height: 130px; padding:50px; left:...

3
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
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
1
 Аватар для kirill1059
14 / 14 / 3
Регистрация: 16.04.2013
Сообщений: 404
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%;
}
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
14.06.2015, 19:25
Лучший ответ Сообщение было отмечено kirill1059 как решение

Решение

kirill1059, вот

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

я там оставил пояснения, сейчас все отображается на весь экран, по необходимости поменяете размер под себя
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
14.06.2015, 19:25
Помогаю со студенческими работами здесь

Задать фон и сделать hover-эффект для кнопки
Такой вопрос не знаю как бы правильней сделать. что-бы не было криво есть кнопка у неё основной эффект фона background-image:...

Как наложить эффект
Доброй ночи! У меня такая проблема: из-за того, что в WPF не предусмотрено событие &quot;даблклик&quot;, мне пришлось делать задуманное...

Наложить эффект на PictureBox
Здравствуйте, прошу помощи. Не могу сделать такой эффект, как на 3ех изображениях вот тут. Т.е. при наведении на изображение, изображение...

OpenGL es: наложить фон
Всем привет!!! Подскажите пожалуйста как в играх делаются картинки типа background, вот допустим есть улица по которой можно перемещаться,...

Как можно наложить на картинку эффект-анимацию, падающего снега получив при том gif-ку?
Посоветуйте, пожалуйста, подходящую для этого программу. (А также хотелось бы знать как на профессиональном языке называется такой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
моя боль
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 из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru