Вопрос по css3, html5, css, xml, html – Текст поверх изображения / кнопки

2

Как сделать текст поверх изображения / кнопки, используя HTML / CSS.

Например: у меня есть кнопка (кнопка входа). Я хочу, чтобы текст "Логин" был помещен над этой кнопкой. Текст должен быть центром изображения / кнопки.

Вы можете иметь div с фоновым изображением и контентом в качестве логина, который можно выровнять по центру. sasi
Дубликат этого?stackoverflow.com/questions/8708945/... mplungjan

Ваш Ответ

8   ответов
0

https://www.w3schools.com/html/html_tables.asp

В противном случае это может выглядеть примерно так:

<table class="form-group">
    <tr>
        <th><h6><label for="Machine Name" class="col col-form-label">Machine Name</label></h6></th>
    </tr>
    <tr class="col-12 col-md-2">
        <td><asp:TextBox ID="txtMachineName" ClientIDMode="Static" CssClass="form-control" MaxLength="256" runat="server" required="required"></asp:TextBox></td>
    </tr>

    <tr>
        <th><h6><label for="serialNumber" class="col col-form-label">Serial Number</label></h6></th>
    </tr>
    <tr>
        <td><asp:TextBox ID="serialNumber" ClientIDMode="Static" CssClass="form-control" MaxLength="256" runat="server" required="required"></asp:TextBox></td>
    </tr>
</table>
0

взгляните также на загрузочную среду

http://jsfiddle.net/Lw2nhc26/

<div class="button">
    Button
</div>

.button {
    padding:10px;
    background-color:#000000;
    width 100%;
    color:#FFFFFF;
    text-align: center;
    border-radius:5px;
}
опять же, это не имеет ничего общего с изображением (что было проблемой)? jbutler483
0
Центрирование перед изображением

вы можете обернутьimg в div, используйте позиционирование наimg сам, а также текст.

Затем вы сможете центрировать это с помощью преобразований (с поддержкой многострочного текста).

демонстрация

.wrap {
  position: relative;
  display: inline-block;
  height: 300px;
  width: 300px;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
p {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: tomato;
  font-weight: bold;
}
<div class="wrap">
  <img src="http://lorempixel.com/300/300" />
  <p>some text</p>
</div>

Изображения с кнопками

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

Это может быть достигнуто с помощьюbackground-image имущество.

Так что в вашем CSS используйте что-то вроде:

background-image:url(http://lorempixel.com/200/200);

регулируя размер с помощью

background-size:100% 100%;

растянуть его до полного размера кнопки.

0

айте что-то вроде этого

#button {
    text-align: center;
}
это не имеет никакого отношения к изображению (что было проблемой)? jbutler483
0

Используйте этот код. По умолчанию будет выполнено выравнивание по центру.

<button type="button">This is Button</button>
это не имеет никакого отношения к изображению (что было проблемой)? jbutler483
0

вы можете иметь div с фоновым изображением.

HTML

<div>
    Login
</div>

CSS

div{
    background-image:url("http://www.noao.edu/image_gallery/images/d4/androa.jpg");
    width: 200px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
}

скрипка

5

background-image собственность соответствующегоbutton (или другой элемент, если вы используете вместоbutton).

Обратите внимание, что вы можете контролировать высоту / вертикальное центрирование текста, используяline-heightОднако, если текст многострочный, это может вызвать другие проблемы, поэтому вы можете использоватьpaddingили подчиненный элемент сtop:50%;tranform:translateY(-50%);

Если используется семантически действительныйbutton элемент, текст выравнивается по центру по умолчанию, в противном случае просто устанавливаетсяtext-align:center

button {
  line-height: 50px;
  width: 300px;
}
button.imgButton {
  color: white;
  background-image: url(http://abdpbt.com/tech/wp-content/uploads/2009/09/gradient.jpg);
  background-size:cover; /* <-- scale the image to cover the button */
  background-position:center center; /* <-- center the image in the button */
}
<button>Normal Button</button>

<button class='imgButton'>Image Button</button>

@KheemaPandey: существует множество причин, по которым текст на кнопке может перекрываться, на что может повлиятьline-height (как уже упоминалось SW4) jbutler483
Я знаю, кнопка поддержки многострочного текста, но для конечного пользователя, чтобы все ясно и лучше выполнятьcall to action Текст кнопки должен быть коротким. Kheema Pandey
намного чище, чем мой подход :) jbutler483
@ jbutler483 Вы не поняли, о чем я говорю .. У кнопки «У» действительно многострочный текст… По крайней мере, кнопка, которую я понял, должна быть ориентирована на пользователя, потому что она подталкивает пользователя к выполнению каких-либо действий… поэтому короткий текст - лучший вариант. Kheema Pandey
2

HTML-код:

<input type="submit" value="Login" class="myButton"/>

CSS:

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}
это не имеет никакого отношения к изображению (что было проблемой)? jbutler483
@jbutler Вопрос задан для кнопки или изображения. FYI: Прочтите вопрос еще раз. Mihir

Похожие вопросы