Перейти к содержанию
AE1

Как сделать надпись поверх картинки? [РЕШЕНО]

Рекомендуемые сообщения

Доброго всем времени!

Уже открывал подобную тему, но так и не получил ответа. Хочется сделать кнопки/картинки с надписями поверх картинок. Т.е. подгружают скажем картинку, а поверх нее просто пишу текст?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Все зависит от назначения кнопки, самый простой вариант в HTML:

В документе:

<div class="button"><a href="тут ссылка">Текст</a></div>

В css:

.button {
	 text-align:center;	/ тут расположение текста (по центру)/
	 background:	url(/img/button.png) no-repeat;		 / тут путь к картинке, "no-repeat"- чтоб не повторялась /
	 height:27px;				 / высота кнопки (желательно, чтоб совпадало с высотой картинки) /
	 width:112px;				/ ширина кнопки (желательно, чтоб совпадало с шириной картинки) /
	 font: 14px Tahoma;	/ размер шрифта и стиль  /
	 text-transform:uppercase;  / надпись на кнопке заглавными буквами  /
	 color:#f4f6f8;			 / цвет надписи  /
	 text-decoration:none; / не будет подчеркивания надписи /
	  }

для более тонкой настройки отображения сюда же можно добавить (естественно подставляя необходимые значения вместо 0рх) :

padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

в формате php,

пример кнопка "Купить" на Опенкарте:

В документе:

<div class="cart">
<input type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');" class="button" />
</div>

В css:

input.button {
   display:block;
   text-align:center;
   background:url(../img/button_buy.png) no-repeat;
   height:27px; width:112px;
   font: 14px Tahoma;
   text-transform:uppercase;
  color:#f4f6f8;
  text-decoration:none;
  padding: 0 0 0 0;
  margin: 3px 0px 10px 0px;
}

то есть для простоты объяснения создаете класс (<div class="button"></div>) и в css параметром background: задаете фоновую картинку этого объекта

если внимательно сравнить 2 кода, то можно понять что, где и куда прописывается (просто вместо слов в php в данном случае используется "код слова" из словаря language. и в зависимости какой из языков подключен в данный момент, из такого языкового файла и берется значение слова

думаю для начала, данный сайт Вам жизненно необходим: http://htmlbook.ru/

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Наверное я не совсем правильно сформулировал, или я не понимаю как это сделать :) идея простая, есть ли возможность в рамках стандартного текстового редактора который входит в комплект поставки опенкарта, загрузить картинку (ну это понятно можно) после чего в этом же редакторе поверх картинки написать текст? т.е. скажем так сделать как бы картинку фоном а текст поверх нее?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В редакторе переключаетесь на Источник и пишите html код и описываете стилями там же.

Все остальное фантастика. Или заранее пишите на картинках текст, или создавайте html код.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<div style="float:left; width:230px; height:230px; background:url('http://artvision1.pl/wp-content/uploads/2012/05/opencart.png') no-repeat; padding:12px;">
 <strong>Тут пишем любой понравившийся текст, можно и так</strong>
</div>
  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<div style="float:left; width:230px; height:230px; background:url('http://artvision1.pl/wp-content/uploads/2012/05/opencart.png') no-repeat; padding:12px;">
 <strong>Тут пишем любой понравившийся текст, можно и так</strong>
</div>

Спасибо за код! Попробую на примере разобраться!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.