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

Как наложить на отцентрованное изображение текст?

01.04.2015, 14:14. Показов 918. Ответов 2
Метки нет (Все метки)

Как отцентровать картинку ico3.jpg и наложить текст на нее так, чтобы он был почти в самом низу картинки?

HTML5
1
2
3
4
5
6
<body>
        <div class="logo>">
            <img class="icon" src="ico3.jpg"> </img>
            <p class="header"> Текст</p>
        </div>
    </body>
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
body {
    background-color: rgb(240,186,86);
}
 
.logo {
    position: relative;
}
 
.icon {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 400px;
    width: 400px;
    border-radius: 200px;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.8);
}
 
.header {
    font-size: 100px;
    font-family: 'Dancing Script';
    margin: auto;
    position: absolute;
    top: 20; left: 0; bottom: 0; right: 0;
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.04.2015, 14:14
Ответы с готовыми решениями:

Как наложить текст на изображение
Есть скрипт для смены изображения при наведении курсора . Как наложить текст на изображение ? ...

Как текст наложить на картинку, чтобы текст ее фоном закрывал
Есть такой код http://jsfiddle.net/dmvlad19/jn4yrbk8/ но не получается сделать так, чтобы текст...

Как наложить на картинку прозрачный фон и текст?
вот css картинки .curved-hz-1 { position:relative; width: 700px; height: 130px;...

Наложить на картинку текст?
Здравствуйте! У меня есть блок, в самом его верху есть картинка. Так вот, как прямо на картинку...

2
62 / 53 / 35
Регистрация: 30.03.2015
Сообщений: 264
01.04.2015, 14:23 2
Зачем картинку абсолютно позиционировать?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.logo {
    position: relative;
    height: 400px;
    width: 400px;
    margin: 0 auto;
}
.icon {
    width: 100%;
    border-radius: 50%;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.8);
}
.header {
    font-size: 100px;
    font-family: 'Dancing Script';
    position: absolute;
    bottom: 20px; /*сколько пикселей снизу*/
    left: 0;
}
Не нужно задавать все 4 значения при позиционировании, вы путаете браузер, как он вам разместит объект сверху и снизу на ноль одновременно? Достаточно 2 - горизонталь и вертикаль. На крайняк не используемым значениям задавайте auto (top: auto)
0
202 / 151 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
01.04.2015, 15:25 3
olegmorales, но если так и охота всему прописывать абсолютное позиционирование, используйте
CSS
1
z-index:n;/*где n- приоритет. 1 самый малый. */
но тут я согласен с
Цитата Сообщение от Xteda Посмотреть сообщение
Не нужно задавать все 4 значения при позиционировании
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.04.2015, 15:25

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Смещаеться блок если на него наложить текст
Здраствуйте. Столкнулся с проблемой. Когда на блок с квадратом ложу текст, он почему-то смещаеться....

Наложить текст на изображение для дальнейшего сохранения как картинки
Вопрос, как наложить текст на изображение для дальнейшего сохранения как картинки. То есть есть...

Как наложить полупрозрачное изображение
Посмотрите программу. Существует ли какая-либо возможность средствами Visual Basic или API...

Как наложить одно изображение на другое в PIL?
Например, имеется два изображения — img1.jpg и img2.jpg, img1.jpg 512х512 пикселей, img2.jpg 56х56...


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

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

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