Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
Rudy_Wade
0 / 0 / 3
Регистрация: 02.06.2013
Сообщений: 139
1

Изображение по центру поверх фона

23.03.2015, 15:38. Просмотров 1305. Ответов 2
Метки нет (Все метки)

Честно признаюсь: в html я полнейший нуб.
Мне понадобилась страница стартового экрана для моей программы, так как писать размытие изображения в самой программе довольно проблематично, я решил обратиться к вебу, то есть разместить браузер во всю форму и загрузить в неё эту страницу.Нашёл эффект размытия по гауссу на CSS, собственно, всё по плану, однако вот незадача: мне осталось разместить логотип по центру поверх бэкграунда, а размещается он почему то под ним, а не на нём.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 <head>
  <title>
    StartMenu
     </title>
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
<body>
 <!--Background-->
    <div class="img-bg"><img src="Desktop.jpg"></div>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
  <feGaussianBlur stdDeviation="3" />
  </filter>
 </svg>
 <!--Logotype-->
 <div class="logotype"><img src="TransparentLogo1.png"></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
body { background: #000; }
 
.img-bg {
  background: no-repeat center center fixed;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
    
 -webkit-filter: url(#blur);
  filter: url(#blur);
  -webkit-filter: blur(30px);
  filter: blur(30px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30');
  -webkit-transition: 1s -webkit-filter linear;
  transition: 1s filter linear;
}
 
 
.logotype {
    position: relative;
    text-align: center;
}
BLUR.rar
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.03.2015, 15:38
Ответы с готовыми решениями:

При наведении на изображение,изображение должн немного затемнится и + по центру изображения треугольник
Вот допустим у меня 3 картинки: нужно чтоб при наведении на любую из них,затемнялось и картинка...

Картинка поверх фона
Приветствую! Нужно чтобы картинка располагалась поверх черного фона, скажите что делаю не так?...

Выравнивание фона по центру CSS
Здравствуйте! Например, фон - большая картинка (или маленькая, не суть). Как выровнять его по...

Размещение картинки поверх фона
Нужно картинку из папки images разместить поверх рамок как в итоговой картинке, помогите плиз

Прозрачная картинка поверх фона
Вот код... ниже вид в браузере. Вопрос как поверх этих фонов поставить картинку ту которой часть...

2
Rudy_Wade
0 / 0 / 3
Регистрация: 02.06.2013
Сообщений: 139
23.03.2015, 16:28  [ТС] 2
и ещё, оказывается компонент (TWebBrowser) использует движок IE7, ну или тот, что установлен в системе, и css там коряво как-то отображаются, так что под IE придётся писать, кому не лень, помогите советом хотя бы
Сама цель заключается в том, чтобы загрузить страницу в компонент WebBrowser (прога на Delphi) да так, чтобы все по экрану ровно стояло, без скроллбаров сбоку и снизу.
0
сахей
65 / 65 / 20
Регистрация: 26.02.2013
Сообщений: 336
Записей в блоге: 1
23.03.2015, 16:30 3
CSS
1
2
3
4
5
.logotype {
    position: absolute;
    top: 44%;
    left: 44%;
}
1
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.03.2015, 16:30

Картинка-ссылка поверх картинки-фона
Поверх картинки-фона надо наложить картинку-ссылку. Через &lt;a&gt;&lt;img&gt;&lt;/a&gt; не делается.

Как выровнять текст ссылки по центру фона
Доброго времени суток! Народ помогите сделать никак не получается сделать выравнивание по...

Картинка в фон поверх основного фона сайта
Суть такова Фон сайта замощен изображением, нужно поверх фона вставить изображение, которое так же...


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

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

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