Как сделать размер кнопки равным размеру фонового изображения в HTML? - PullRequest
Новая
       1

Как сделать размер кнопки равным размеру фонового изображения в HTML?

3 голосов
/ 22 февраля 2012

У меня есть следующий код.Проблема в том, что мне не удается сделать размер кнопки равным размеру фонового изображения.Размер фонового изображения составляет 60х60 пикселей.Как мне это кодировать? 

  <tr>
                <td><button style="width: 60px; height: 60px;"><img src="darkSquare.jpg" /></button></td>
                <td><button style="width: 60px; height: 60px;"><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>
            <tr>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>

Я получаю следующий вывод:

enter image description here

Ответы [ 6 ]

2 голосов
/ 22 февраля 2012

Попробуйте, в CSS, 

button {
  background-image:url('www.example.com/image.jpg');
  width:50px; /* or whatever */
  height:30px; /* or whatever */
}

Это должно сделать это для всех кнопок.

1 голос
/ 22 февраля 2012

Использовать изображение в качестве фона кнопки. Сделайте так, чтобы кнопка и высота кнопки соответствовали размеру изображения. Если размер изображения 60X60, тогда CSS будет 

button {
display:block;
width:60px;
height:60px;
background: url(image.jpg) no-repeat top center;
}

это может вам помочь ...

0 голосов
/ 19 марта 2019

Недавно столкнулся с этой проблемой, и все ответы попросили встроить изображение в кнопку вместо исходной HTML-структуры.

Мое решение:

html: 

<button style="width: 60px; height: 60px;">
  <img class="img-center" src="darkSquare.jpg" />
</button>

css: 

.img-center {
  position: relative;  
  margin: auto;
}

Все так просто!Этот ответ не требует, чтобы вы изменили свою HTML-структуру, особенно для тех, кто предпочитает эту структуру.

0 голосов
/ 22 февраля 2012

Попробуйте что-то вроде этого: Добавить тег стиля: 

<style>
.darkSquare{
    background: url('darkSquare.jpg') no-repeat;
}
.lightSquare{
    background: url('lightSquare.jpg') no-repeat;
}
.btn{
    width:60px;
    height:60px;
    background:#FFF; 
    border:0;
}

</style>

Измените существующий код на: 

<tr>
    <td><button class="btn darkSquare"/></td>
    <td><button class="btn lightSquare"/></td>
</tr>
0 голосов
/ 22 февраля 2012

Было бы полезно использовать это вместо: 

<input type='image' src='lightSquare.jpg'/>
0 голосов
/ 22 февраля 2012

Используйте изображение в качестве фона CSS кнопки и соответственно измените размер кнопки.

Еще лучше: используйте A-тег с display: block и используйте там CSS-фон.

...