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

Размытие фонового изображения - HTML, CSS

12.05.2016, 21:01. Просмотров 791. Ответов 2
Метки нет (Все метки)

Здравствуйте. Нужно, чтобы фон был размыт как на картинке. Как это реализовать? Страница (html и css файлы) вложена.
http://www.cyberforum.ru/html/thread1780620.html
0
Миниатюры
Размытие фонового изображения  
Вложения
Тип файла: rar Новая папка (3).rar (299.0 Кб, 4 просмотров)
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.05.2016, 21:01
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Размытие фонового изображения (HTML, CSS):

Размытие изображения при анимации
Здравствуйте. Подскажите, пожалуйста, как решить следующую проблему. На...

изменение фонового изображения
Здравствуйте. я владелец сайта на ucoz. сделал у себя в css статичный фон -...

повторение фонового изображения
народ как сделать повторение фонового изображения repeat-x это по иксу а как...

Полупрозрачность фонового изображения
Всем привет. Поставил таблице изображение фоном. Есть ли возможность что-бы это...

Адаптация фонового изображения
При адаптации под движок, нужно будет разрезать фон для того, чтобы он был...

2
ttsergey
0 / 0 / 0
Регистрация: 13.05.2016
Сообщений: 6
13.05.2016, 02:52 #2
Фон можно размыть в фотошопе используя фильтр.
Здесь указано как растянуть фон на всю область - http://pro-cod.ru/fon-na-vsyu-stranicu-html-css.html
0
mrtoxas
Модератор
Эксперт HTML/CSS
2548 / 1885 / 1177
Регистрация: 12.07.2015
Сообщений: 5,091
Записей в блоге: 3
13.05.2016, 10:28 #3
Лучший ответ Сообщение было отмечено Danichnone как решение

Решение

Для начала надо постараться забыть тег <center>
А потом сделать так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>Atlantida</title>
</head>
<body>
<div class="content">   
    <div class="blur"></div>
    <div class="blur-content">
        <span class="text">Design Studio and Digital Agency</span>
        <span class="weare">WE ARE ATLANTIDA</span>
        <a href="about.html" class="button">Get Started</a>
    </div>
</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
body {font-family:'proxima-nova', sans-serif;}
 
 
.content {
    width:1280px; height:550px; 
    margin: 8px auto 0 auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}
 
.blur, .blur-content{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width:100%;
    height: 100%;
}
 
.blur-content{
    z-index: 100;
}
 
.blur{
    z-index: 99;
    background:url(main1.jpg);
    background-size: cover;
    backgroun-repeat: no-repeat;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
 
}
.text{
    font-size:13px; color:white;
    letter-spacing: 1px;
    padding-top:170px;
    display:inline-block;
    width: 100%;
}
 
.weare {
    font-size:46px; color:white;
    width:450px; height:60px;
    border-top:5px solid white;
    border-bottom:5px solid white;
    margin-top:25px;
    display:inline-block;
}
 
.button {
    font-size:16px; color:white; letter-spacing: 1px;
    width:94px; height:18px;
    padding:12px 22px;
    border:2px solid white;
    margin: 50px auto 0 auto;
    text-decoration: none;
    display: block;
}
0
Миниатюры
Размытие фонового изображения  
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.05.2016, 10:28
Привет! Вот еще темы с решениями:

Масштабирование фонового изображения
после того как кончается фон начинается белая область,это значит фоновое...

Размер фонового изображения
Доброго времени суток, у меня появился очень нубский вопрос по поводу размера...

Смена фонового изображения по клику
Подскажите, пожалуйста, что можно сделать, я еще, честно говоря, очень плохо...

Адаптивность фонового изображения Bootstrap
переделываю этот сайт под Bootstrap http://imi.bsu.ru/moais/. делаю адаптивную...


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

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

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