Наложение текста на кнопку ImageButton - PullRequest
Новая
       9

Наложение текста на кнопку ImageButton

1 голос
/ 05 марта 2009

Кто-нибудь знает простой способ отображения текста поверх изображения? Одно решение, которое я нашел, это просто сделать следующее: 

<img id='img1' src='myimage.jpg'>
<div style='position:relative; top:-30px'> MY TEXT TO DISPLAY ON IMAGE</div>

Это заставит Div и все его содержимое переместиться на 30 пикселей вверх. Проблема в том, что я не знаю высоту своего изображения. Тем не менее, я знаю ширину. Кроме того, на моей странице может быть много динамических изображений, для которых требуется наложение текста, и я не обязательно знаю абсолютную позицию изображения во время выполнения на сервере.

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

PS: я открыт для решения на стороне клиента, такого как javascript / JQuery.

Ответы [ 8 ]

3 голосов
/ 05 марта 2009

Как насчет этого? 

<div style="position: relative;">
  <img src="..." />
  <div style="position: absolute; top:0; left:0">!!! TEXT HERE !!!</div>
</div>
2 голосов
/ 20 июля 2011

Я думал, что этот старый пост может помочь любому, кто ищет ответ (если вы уже нашли его :) Текст на кнопке изображения в c # asp.net 3.5

2 голосов
/ 05 марта 2009

Фоновые изображения лучше всего подходят для этого. Что-то вроде 

<style>
.thing {
  background-image: url(myimage.jpg);
  background-repeat: no-repeat;
  padding: 10px;;
</style>


<div class="thing">My Text</div>
1 голос
/ 05 марта 2009

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

С фоновыми изображениями вы не можете проверить размер изображения! Не забывай об этом.

1 голос
/ 05 марта 2009

С помощью jQuery вы можете использовать плагин размеры , чтобы получить размер изображения. Вы можете легко изменить стиль вашего div.

0 голосов
/ 14 марта 2009

Почему бы просто не использовать div отдельно? 

<div style="display:inline;background:url('img.png');width:128px;height:128px;">text here</div>
0 голосов
/ 06 марта 2009

Что ж, я смог обойти это, осознав, что в конкретном случае, в котором я заинтересован, все изображения на самом деле будут иметь одинаковую высоту. Так как это так, следующая разметка отлично работала для меня: 

<head>
<style type="text/css">
  .myClass {
    text-align:center;
    margin-top:-35px; /*set this to the distance from the bottom*/
    font-weight:bold;
    font-size:18px;
    color:#fff;
    background-color:#111;
    width:160px;
   }
</style>
</head>
<body>
<img src='My Fixed Size Image' />
<div class='myClass' runat='server'>MY TEXT HERE</div>
</body>
0 голосов
/ 05 марта 2009

Если вы хотите, чтобы он работал с фоновым изображением, попробуйте это: 

    .btn {position: relative; background-image: url('yourimagehere.png'); width: 100px; height: 20px;}
    .btn span {position: absolute; top:0; left:0; width: 100px; height: 20px; }

    <div class="btn">
         <a  href="#">My Text<span/></a>
    </div>

Обратите внимание, вам нужно установить ширину и высоту в соответствии с вашей кнопкой в ​​CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...