Как реализовать прозрачность кнопок?

[centurionkz]

Нужно реализовать прозрачную кнопку (как на первом рисунке) но при попытке сделать так через <button> и соответствующие свойства CSS прозрачность исчезает, хотя если открыть соответствующий "png" фотошопом, то прозрачность видна.

Вопрос: как можно реализовать прозрачность? Через обычную ссылку с рисунком внутри тоже пробовал - не получается.

 

#main_image_left_button {    position: relative;    top: -150px;    left: -5px;    background-image: url(../images/index/main_image_left_button.png);    background-size: 100%;    border: none;    height: 66px;    width: 32px;}

Должно быть так:

 

Выходит так: 

 

[li4e]

Попробуйте добавить строчку
 

background-color: transparent;

http://jsfiddle.net/83unekpr/2/

Сто лет не использовал button, точно уже не вспомню, но вроде там есть какие-то заморочки с фоном, и они даже вроде как-то решаются. Я лично использую див для всех кнопок и через js вешаю на него события, думаю большинство делает так же.

Как вариант там стоит что-то типа background-color:#fff по умолчанию.

Не хорошо семантику нарушать.

Edited September 25, 2015 by li4e

[infidel]

Сто лет не использовал button, точно уже не вспомню, но вроде там есть какие-то заморочки с фоном, и они даже вроде как-то решаются. Я лично использую див для всех кнопок и через js вешаю на него события, думаю большинство делает так же.

Как вариант там стоит что-то типа background-color:#fff по умолчанию.

Edited September 25, 2015 by infidel

[infidel]

Не хорошо семантику нарушать.

, Я немного лишку хватил, в формах понятное дело я использую кнопки, смутил именно тег button обычно делается через input type=button, ну и я впринципе давно не верстал, поэтому я и правда давно их не юзал). А если это просто активный элемент, при нажатии на который вызывается некий js, то я всегда юзал дивы. Это бы вы тоже отнесли к нарушению семантики?

[li4e]

Я бы отнес, так как считаю, то что по своей сути является кнопкой и должно быть кнопкой.

Хотя раньше делал как описали вы)

Edited September 25, 2015 by li4e

[infidel]

А влияет ли это на что-то кроме читабельности кода?

[li4e]

Не знаю. Вроде как поисковики любят семантичную верстку, хотя могу и ошибаться.

[infidel]

@li4e, Понятно, у меня примерно такая же информация на этот счет.

[centurionkz]

Попробуйте добавить строчку

 

background-color: transparent;

http://jsfiddle.net/83unekpr/2/

¡Muchas cracias! Получилось  

Edited September 25, 2015 by centurionkz