Jump to content
Sign in to follow this  
AE1

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

Все зависит от назначения кнопки, самый простой вариант в 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

все можно, есть такое понятие как позиционирование блоков в 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

Share this post


Link to post
Share on other sites

все можно, есть такое понятие как позиционирование блоков в 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>

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.