imagem
tenho um pequeno problema em definir uma imagem de fundo para <button>.
Aqui está o html que tenho no site:
<button id="rock" onClick="choose(1)">Rock</button>
e aqui está o 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;
}
9 answers
O selector de CSS button #rock diz: "Dá - me um elemento com o id rock dentro de um elemento <button>", assim:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
Mas o que querias era um elemento <button> com o idrock. E o selector para isso seria button#rock (repare no espaço em falta entre botão e #rock ).
E como @Greg já mencionou: #rock já é suficientemente específico para mire no botão e pode ser usado por conta própria.
Por alguma razão estranha, a largura e a altura do botão foram repostas. Você precisa especificá-los no selector de ID também:
#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;
}
Tens de ligar para a aula no botão
<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>
Substituir botão # rock Com rock
Não é necessário um selector adicional. Estás a usar uma identificação tão específica quanto podes ser.
JsBin exemplo: http://jsbin.com/idobar/1/edit
Tente mudar o seu CSS para este
button #rock {
background: url('img/rock.png') no-repeat;
}
...desde que a imagem esteja nesse lugar
Apagar "botão" Antes de # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Para se livrar da cor branca, tem de definir a cor de fundo como transparente:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
Tenta por aqui
<button>
<img height="100%" src="images/s.png"/>
</button>
Ex. Este é o seu código 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>
Estiliza-o à tua discrição