кнопка с изображением, определенным в css

#html #css

#HTML #css

Вопрос:

Я хотел бы создать кнопку (интерактивный элемент) без текста, но с изображением.
Я хочу, чтобы изображение было определено в css.

Если я использую элемент Image, изображение не может быть определено в css.
Использование div выглядит неуместным.

что-то вроде:

 <elem></elem>

elem {
    backround-image:url(img.jpg);
}

Как я могу это сделать? Что такое elem?

1. Если вы не хотите добавить javascript на свою страницу, elem может быть a элементом только в том случае, если вы хотите, чтобы он действовал как ссылка.

2. @Niklas: Я не вижу никакой связи между javascript и элементом.

3. Что ж, можно щелкнуть по любому элементу на странице, но если вы ожидаете, что он действительно что-то сделает, это должна быть ссылка или кнопка отправки, если вы не прикрепите к ней обработчики кликов.

4. @Niklas: Мне все равно прикреплять обработчики событий. Это вопрос только html и css. Я ищу наилучший подход для этого.

Ответ №1:

Вы можете использовать элемент button, сбросив для него значение CSS по умолчанию, или использовать DIV.
Кнопка более семантична.
Очевидно, вам все равно нужно будет добавить обработчик события к событию onclick, чтобы оно что-то сделало.

Пример:

 <style>
.myburron{
   background-image: url('../myimage.jpeg');
   width: Xpx;
   height:Ypx;
   display: [not sure, think inline-block is best];
   border-style: none;
   background-color: none;
}
</style>

...
...
...
<button class="myburron"> </button>

1. что вы подразумеваете под «элементом кнопки»? Мне нужно, чтобы html был допустимым. Если для элемента button требуется атрибут imageSrc, он не подойдет.

2. Нет- большинство html-элементов могут иметь фоновое изображение

Ответ №2:

HTML:

 <input type="button" name="btn" id="btn">

CSS:

 #btn{
    width: 100px;
    height:40px;
}
#btn:hover{

    background-image: url('images/button_hover.jpg');
}

#btn:active{
    background-image: url('images/button_active.jpg');
}