Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
kirill1059
14 / 14 / 3
Регистрация: 16.04.2013
Сообщений: 402
1

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

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

Добрый день.
На сайте располагается фоновое видео, нужно на него наложить такой эффект как на картинке, то есть перекрыть его полупрозрачным фоном.
Можно ли это сделать с помощью HTML и CSS?
Спасибо
http://www.cyberforum.ru/attachment....1&d=1434129777
0
Миниатюры
Наложить эффект на фон  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.06.2015, 20:21
Ответы с готовыми решениями:

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

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

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

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

Фон позади кнопки должен быть, как фон блока
Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами,...

3
evikza
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 514
12.06.2015, 20:46 2
да, конечно для этого существует 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
Сообщений: 402
14.06.2015, 15:19  [ТС] 3
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
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 514
14.06.2015, 19:25 4
Лучший ответ Сообщение было отмечено kirill1059 как решение

Решение

kirill1059, вот

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

я там оставил пояснения, сейчас все отображается на весь экран, по необходимости поменяете размер под себя
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.06.2015, 19:25

Фон body перекрывает фон остальных элементов
Добрый день. Столкнулся с такой проблемой когда писал сss код body{...

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Наложить div на другой
Здарова. Прошу вашей помощи. Нужно наложить слой &quot;див&quot; на другой. На страничке...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru