1

Нужно на кнопку назначить картинку свою, делаю так:

Html

<button class="button">Кнопка</button>

Css:

.button{
    background: url('../images/red/top.png'); 
}

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

2 ответа 2

1

Например так:

button 
{
    background: url(../img/button_img.png) 50% 50% no-repeat;
    background-size: contain;
    width: 100px;
    height: 50px;
}

Если я правильно понял, что вам нужно... Размеры ширины и высоты указывайте любые.

4
  • .button{ background: url('../images/red/top.png') no-repeat; width: 35px; height: 30px; Сделал так,указал размеры картинки, картинку видно но она будто в квадратной кнопке,а мне нужно что бы было видно только картинку,а картинка у меня своеобразной формы.Если делаю по вашему способу то кнопка опять становится маленькой и без картинки.
    – Amlo
    Commented 22 дек. 2014 в 14:33
  • Нужно, чтобы контуров кнопки не было видно, а то получается как картинка в квадратной кнопке, а мне нужно, чтобы отображалась только картинка без кнопки.
    – Amlo
    Commented 22 дек. 2014 в 15:51
  • border: none; решит вашу проблему
    – Matt Hale
    Commented 22 дек. 2014 в 17:09
  • Да,вот то что нужно,спасибо!
    – Amlo
    Commented 22 дек. 2014 в 17:47
1

Можно применить стили для кнопки.

<style>
.button{
        background: none;
        border: none;
    } 
</style>
<button class="button" name="leaf" value="1"><img src="img/ico/right.png"></button>

Если размер картинки не задан при её сохранении, то нжуно прописать в стиле. Например:

width="70px" height="40px"; 

так я вставляю рисунки с прозрачным слоем, которые сами являются кнопками.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.