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

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
источник

9 ответов

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
источник
21

По какой-то нечетной причине ширина и высота кнопки были сброшены. Вы также должны указать их в селекторе 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
источник
  • Что плохого в ID? –  Kyrbi 17.03.2013 в 14:54
  • предоставление идентификатора и кнопки сложны, класс может использоваться и для других кнопок –  Tom 17.03.2013 в 19:10
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
источник
  • Сделал это. Еще белый. : / –  Kyrbi 17.03.2013 в 14:38
  • Я отредактировал ваш ответ, чтобы исправить селектор. Между кнопкой и ее идентификатором не должно быть пробелов. –  isherwood 17.03.2013 в 14:40
  • Я также попробовал полный url для изображения miracz ..... img / rock.png –  Kyrbi 17.03.2013 в 14:42
  • Вам вообще не нужна часть кнопки. Это просто препятствие производительности. –  Greg 17.03.2013 в 14:43
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
источник
-1

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

например. Это ваш код 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>

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

    
ответ дан Bakhrom 04.03.2018 в 18:28
источник