<button> hình nền

Question

Tôi gặp vấn đề với việc thiết lập hình nền cho <button>.

Đây là html Tôi đã có trên trang web:

<button id="rock" onClick="choose(1)">Rock</button> 

Và đây là 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; 
} 

Tôi không biết lý do tại sao nền của nút vẫn còn trắng.

Answer 1

Astonishing rằng không có địa chỉ trả lời hoặc đề cập đến vấn đề thực sự ở đây.

Bộ chọn CSS button #rock nói "cho tôi một phần tử với id rockbên một yếu tố <button>", như thế này:

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

Nhưng những gì bạn muốn là một yếu tố <button>với id rock . Và bộ chọn cho điều đó sẽ là button#rock (lưu ý khoảng trống giữa nút và #rock).

Và như @Greg đã đề cập: #rock đã đủ cụ thể để nhắm mục tiêu nút và có thể được sử dụng riêng.

Answer 2

Hãy thử thay đổi CSS của bạn vào đó

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

... với điều kiện là các hình ảnh được đặt ra rằng

Answer 3

Đối với một số lý do kỳ quặc, chiều rộng và chiều cao của nút đã được thiết lập lại. Bạn cũng cần chỉ định chúng trong công cụ chọn 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.

Answer 4

Xóa "nút" trướC# đá:

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

Làm việc đối với tôi trong Google Chrome.

Answer 5

Thay nút #rock Với #rock

Không cần phạm vi chọn bổ sung. Bạn đang sử dụng một id mà là cụ thể như bạn có thể được.

JsBin dụ: http://jsbin.com/idobar/1/edit

Answer 6

Bạn cần phải gọi CLASS trong nút

<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

thử cách này

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

Answer 8

Để thoát khỏi màu trắng, bạn phải thiết lập background-color để minh bạch:

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

Answer 9

Chỉ cần chắc những hình ảnh với các mũi tên trái và phải như một nút. Thêm chức năng onclick vào hình ảnh.

Ví dụ: Đây là mã HTML của bạn:

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

Stylize nó theo ý của bạn