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

@Danichnone · Регистрация: 06.03.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте. Нужно, чтобы фон был размыт как на картинке. Как это реализовать? Страница (html и css файлы) вложена.

@ttsergey · 13.05.2016, 02:52

Фон можно размыть в фотошопе используя фильтр.
Здесь указано как растянуть фон на всю область - http://pro-cod.ru/fon-na-vsyu-... l-css.html

@mrtoxas · 13.05.2016, 10:28

Для начала надо постараться забыть тег <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;
}

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@ttsergey 0 / 0 / 0 Регистрация: 13.05.2016 Сообщений: 6
	13.05.2016, 02:52
	Фон можно размыть в фотошопе используя фильтр. Здесь указано как растянуть фон на всю область - http://pro-cod.ru/fon-na-vsyu-... l-css.html 0

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

Решение