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
    22 дек 2014 в 14:33
  • Нужно, чтобы контуров кнопки не было видно, а то получается как картинка в квадратной кнопке, а мне нужно, чтобы отображалась только картинка без кнопки.
    – Amlo
    22 дек 2014 в 15:51
  • border: none; решит вашу проблему
    – Matt Hale
    22 дек 2014 в 17:09
  • Да,вот то что нужно,спасибо!
    – Amlo
    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"; 

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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