Текст поверх картинки

@alena900 · Регистрация: 13.10.2009

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

Весь форум перерыла, похожих тем полно, но ничего не получается...

как сделать так, чтобы картинка была в центре и на ней можно было написать текст? но картинка не является фоном.

Vourhey · 22.03.2013, 13:56

Сделай див, в нем background-image, в диве текст.

@koza4ok · 22.03.2013, 14:03

HTML5
1
2
3
4
5
<div class="wrapper">
    <img src="" width=200px height
=200px>
    <p>somae text</p>
    </div>

CSS
1
2
.wrapper{width:200px;height:200px;position:relative;}
p{position:absolute;top:45px;left:20px;}

@alena900 · 22.03.2013, 14:20 **[ТС]**

Необходимо, чтобы и картинка и текст были по центру страницы...

@koza4ok · 22.03.2013, 14:36

Еще условия будут?

@alena900 · 22.03.2013, 16:25 **[ТС]**

нет, простите, что сразу не сказала...)

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

@newJS · 22.03.2013, 20:42

CSS
1
.clas {margin:0 auto; background:url(pics/pic2.jpg); padding:7px; width:400px;}

HTML5
1
2
3
4
5
6
<div class="clas">
Текст поверх картинки<br>
нет, простите, что сразу не сказала...)<br>
<br>
вкладываю картинку, как должно выглядеть.. но здесь я сделала картинку в фотошопе.то есть на фон наложила картинку так, чтобы подвинуть ее под текст, находящийся в середине. но при сворачивании окна, эта картинка, которая должна быть по центру смещается от текста... и получается все криво. вот поэтому и нужно наложить картинку кодом по центру и текст поверх нее, чтобы при сворачивании окна все автоматически было по центру.. 
</div>

CSS
1
2
.clas2 {margin:0 auto; width:400px; position:relative; top:0; left:0;}
.clas2 div {position:absolute; top:0; left:0; padding:7px;}

HTML5
1
2
3
4
5
6
7
8
<div class="clas2">
<img src="pics/pic2.jpg" alt="">
<div>
Текст поверх картинки<br>
нет, простите, что сразу не сказала...)<br>
<br>
вкладываю картинку, как должно выглядеть.. но здесь я сделала картинку в фотошопе.то есть на фон наложила картинку так, чтобы подвинуть ее под текст, находящийся в середине. но при сворачивании окна, эта картинка, которая должна быть по центру смещается от текста... и получается все криво. вот поэтому и нужно наложить картинку кодом по центру и текст поверх нее, чтобы при сворачивании окна все автоматически было по центру.. </div>
</div>

@alena900 · 23.03.2013, 17:15 **[ТС]**

спасибо всем большое) совместила некоторые ваши советы и все получилось, как нужно)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@alena900 3 / 3 / 2 Регистрация: 13.10.2009 Сообщений: 102

	Текст поверх картинки 22.03.2013, 13:45. Показов 4785. Ответов 7 Метки нет (Все метки) Весь форум перерыла, похожих тем полно, но ничего не получается... как сделать так, чтобы картинка была в центре и на ней можно было написать текст? но картинка не является фоном. 0

Vourhey Почетный модератор 7393 / 2639 / 281 Регистрация: 29.07.2006 Сообщений: 13,696
	22.03.2013, 13:56
	Сделай див, в нем background-image, в диве текст. 0

@alena900 3 / 3 / 2 Регистрация: 13.10.2009 Сообщений: 102
	22.03.2013, 14:20 [ТС]
	Необходимо, чтобы и картинка и текст были по центру страницы... 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	22.03.2013, 14:36
	Еще условия будут? 1

@alena900 3 / 3 / 2 Регистрация: 13.10.2009 Сообщений: 102
	22.03.2013, 16:25 [ТС]
	нет, простите, что сразу не сказала...) вкладываю картинку, как должно выглядеть.. но здесь я сделала картинку в фотошопе.то есть на фон наложила картинку так, чтобы подвинуть ее под текст, находящийся в середине. но при сворачивании окна, эта картинка, которая должна быть по центру смещается от текста... и получается все криво. вот поэтому и нужно наложить картинку кодом по центру и текст поверх нее, чтобы при сворачивании окна все автоматически было по центру.. Миниатюры 0

@alena900 3 / 3 / 2 Регистрация: 13.10.2009 Сообщений: 102
	23.03.2013, 17:15 [ТС]
	спасибо всем большое) совместила некоторые ваши советы и все получилось, как нужно) 0