<button> фоновое изображение

У меня есть небольшая проблема с установкой фонового изображения для <button>.

Вот html, который я получил на сайте:

 <button id="rock" onClick="choose(1)">Rock</button>

И вот CSS:

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

Я не знаю, почему фон кнопки по-прежнему белый.

Ответ 1

Удивительно, что ни один ответ не отвечает или не упоминает о реальной проблеме здесь.

Селектор CSS button #rock говорит: "Дайте мне элемент с идентификатором rock внутри a <button>", например:

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

Но вам нужен элемент <button> с id rock. И селектор для этого будет button#rock (обратите внимание на недостающее пространство между кнопкой и #rock).

И как уже упоминал @Greg: #rock уже достаточно специфичен, чтобы нацелить кнопку и может быть использован сам по себе.

Ответ 2

По какой-то нечетной причине ширина и высота кнопки были reset. Вы также должны указать их в селекторе ID:

#rock {
    width: 150px;
    height: 150px;
    background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
    background-repeat: no-repeat;
}

Живой тест.

Ответ 3

Вам нужно вызвать CLASS в кнопке

<button class="tim" id="rock" onClick="choose(1)">Rock</button>



<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>

Ответ 4

Попробуйте изменить свой CSS на

button #rock {
    background: url('img/rock.png') no-repeat;
}

... при условии, что изображение находится в этом месте

Ответ 5

Заменить кнопка #rock С #rock

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

Пример JsBin: http://jsbin.com/idobar/1/edit

Ответ 6

Удалить "button" до # rock:

button #rock {
    background: url(img/rock.png) no-repeat;
}

Работала для меня в Google Chrome.

Ответ 7

Чтобы избавиться от белого цвета, вы должны установить прозрачность фона:

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}

Ответ 8

попробуйте этот путь

<button> 
    <img height="100%" src="images/s.png"/>
</button>