<button> background image

Question

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

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

Answer 1

Поразительно, что нет адреса ответа или упоминает фактическую проблему здесь.

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

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

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

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

Answer 2

Попробуйте изменить CSS для этого

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

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

Answer 3

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

#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.

Answer 4

Удалить "Кнопка" перед # рок:

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

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

Answer 5

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

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

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

Answer 6

Вам нужно, чтобы позвонить в 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> 

Answer 7

попробовать этот способ

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

Answer 8

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

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

Answer 9

Просто сделайте изображения с левой и правой стрелками в качестве кнопка. Добавляет функцию onclick к изображениям.

E.g. Это ваш HTML код:

<img src="url of your button's image" id="previmg" onclick="prev()"> 

<img src="E:\Приложении\Программирование\Мои сайты\Example\images\right_1.png" id="nextimg" onclick="next()"> 

<script> 
var images = [ 
    'image url 1', 
    'image url 2', 
    'image url 3' 
]; 
var num = 0; 
function next() { 
    var slider = document.getElementById('slider'); 
    num++; 
    if(num >= images.length) { 
     num = 0; 
    } 
    slider.src = images[num]; 
} 
function prev() { 
    var slider = document.getElementById('slider'); 
    num--; 
    if(num < 0) { 
     num = images.length-1; 
    } 
    slider.src = images[num]; 
} 
</script> 

Стилизация его по своему усмотрению