фоновое изображение кнопки

17

У меня есть небольшая проблема с установкой фонового изображения для <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;
}

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

    
задан Kyrbi 17.03.2013 в 14:34
источник

8 ответов

17

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

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

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

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

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

    
ответ дан maryisdead 19.06.2014 в 14:45
источник
19

По какой-то нечетной причине ширина и высота кнопки были сброшены. Вы также должны указать их в селекторе 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;
}

Live test case .

    
ответ дан Shadow Wizard 17.03.2013 в 14:40
источник
4

Вам нужно вызвать 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>
    
ответ дан Tom 17.03.2013 в 14:52
источник
1

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

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

Пример JsBin: Ссылка

    
ответ дан Greg 17.03.2013 в 14:42
источник
1

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

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

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

    
ответ дан Adam Brown 17.03.2013 в 14:37
источник
0

Удалить «кнопку» перед # rock:

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

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

    
ответ дан İsmet Alkan 17.03.2013 в 14:42
источник
0

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

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}
    
ответ дан tourdefran 23.05.2017 в 19:50
источник
-1

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

<button> 
    <img height="100%" src="images/s.png"/>
</button>
    
ответ дан Areej Qasrawi 24.11.2016 в 09:50
источник