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

Наложить эффект на фон - HTML, CSS

12.06.2015, 20:21. Просмотров 1117. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Наложить эффект на фон (HTML, CSS):

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

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

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

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

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

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

3
evikza
387 / 239 / 160
Регистрация: 20.05.2015
Сообщений: 508
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
387 / 239 / 160
Регистрация: 20.05.2015
Сообщений: 508
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
Привет! Вот еще темы с решениями:

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

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

Не получается наложить background
Не получается наложить background на сайт &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;...

Наложить на картинку текст?
Здравствуйте! У меня есть блок, в самом его верху есть картинка. Так вот,...


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

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

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