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

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

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

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

Размытие фонового изображения
Здравствуйте! Все знают, что для размытия есть filter: blur, а для контента...

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

изменение фонового изображения
Здравствуйте. я владелец сайта на 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
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,115
Записей в блоге: 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

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

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

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


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

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

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