Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
2 / 2 / 0
Регистрация: 07.09.2020
Сообщений: 33
1

Надпись поверх изображения

28.12.2020, 16:18. Показов 238. Ответов 0
Метки нет (Все метки)

Хочу сделать надпись "Пользователь смог покататься на летающей машине в Cyberpunk 2077©" поверх 2 фона
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Главная страница</title>
            <meta charset="utf-8">
                    <link rel="shortcut icon" href="img/ico_img.png">
                    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="шапка"><img src="img/fon3.jpg" width="1519" height="70"  ></div>
 
                                    <!--Название-->
        <figure><h1 id="Название">Пользователь смог покататься на летающей машине в Cyberpunk 2077©</h1></figure>
 
                                    <!--2 фон-->
        <div class="content-centering block-decor"><img src="img/fon1_img.png" height="700" width="750" alt=""></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
/* Фон сайта */
html {
    background-image: url(img/fon_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
/* 2 Фон сайта */
.content-centering{
    display:flex;
    justify-content: center; /*центрируем элемент по горизонтали */
    align-items: center; /* и вертикали */
    width: 1487px; /* задали размеры блоку-родителю */
    height: 1000px;
}
.block-decor{
    margin: 8px;
    float: left;
    height: 300px;
    position: absolute;
    top: 255px; /* отступ сверху */
    left: 8px; /* отступ слева */
}
 
/*Шапка*/
#шапка{
    position: absolute;
    top: -5px; /* отступ сверху */
    left: 0px; /* отступ слева */
}
 
 
/*Название заголовка*/
#Название{
    position: absolute;
    top: 60px; /* отступ сверху */
    left: 1081px; /* отступ слева */
    color: #fff;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.12.2020, 16:18
Ответы с готовыми решениями:

Вывод изображения поверх другого изображения
Привет, как правильнее сделать такую манипуляцию нужно на картинке вывести справа вверху КРАСНЫЙ...

Текст поверх изображения
Доброго времени суток. Есть примерно следующая ситуация: Есть два изображения. Одно идет на фон -...

Блоки поверх изображения
Body не на весь экран! После идет Div в котором img на всю ширину и фиксированной высотой. Нужно...

Текст поверх изображения
Как сделать так, чтобы текст Text был поверх изображения?Для класса изображения добавила relative,...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.12.2020, 16:18

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Изображение поверх другого изображения
Добрый день! Очень прошу подсказать. Имеется блок, см. тут - zamenafasadov.ru Требуется...

Расположение текста поверх изображения
подскажите как вставить текст в картинку ?)))

Размещение обьектов поверх изображения
Всем привет! Как на изображении разместить форму для ввода текста?

Кнопка поверх изображения-ссылки
У меня есть картинка, которая является ссылкой. Нужно добавить поверх этой картинки кнопку так,...

Как написать текст поверх изображения?
Как написать текст поверх изображения?Изображения находятся в grid...

Как реализовать отзывчивый текст поверх отзывчивого изображения
Здравствуйте, изображение я сделал отзывчивым. Но при увеличении или уменьшении окна браузера...


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

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

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