Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Danichnone
0 / 0 / 0
Регистрация: 06.03.2016
Сообщений: 31
#1

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

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

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

Размытие фонового изображения - HTML, CSS
Здравствуйте! Все знают, что для размытия есть filter: blur, а для контента svg-маска. Да, это все отлично. Но вопрос в следующем, у меня...

Размытие изображения при анимации - HTML, CSS
Здравствуйте. Подскажите, пожалуйста, как решить следующую проблему. На странице с каталогом платьев http://grandeamore.ru/katalog/98/...

Адаптация фонового изображения - HTML, CSS
При адаптации под движок, нужно будет разрезать фон для того, чтобы он был более адаптивный? (Больше статей, больше блоков в сайдбаре) ...

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

повторение фонового изображения - HTML, CSS
народ как сделать повторение фонового изображения repeat-x это по иксу а как что бы по x и y повторялось

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

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
2450 / 1785 / 981
Регистрация: 12.07.2015
Сообщений: 4,814
Записей в блоге: 3
13.05.2016, 10:28 #3
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Для начала надо постараться забыть тег <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
Привет! Вот еще темы с ответами:

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

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

Адаптивность фонового изображения Bootstrap - HTML, CSS
переделываю этот сайт под Bootstrap http://imi.bsu.ru/moais/. делаю адаптивную верстку. проблема с пунктом &quot;мотивация&quot; (щелкнуть...

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


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

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

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