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

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 ответов

19

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

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

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

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

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

    
ответ дан maryisdead 19.06.2014 в 14:45
21

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

#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;
}

Живой тестовый пример .

    
ответ дан Shadow Wizard 17.03.2013 в 14:40
4

Вам нужно вызвать КЛАСС в кнопке

<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

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

Пример 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 ofyourbutton'simage" 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