<button>背景圖片

我在爲背景圖片<button>設置了一個小問題。<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; 
}

我不知道爲什麼按鈕的背景仍然是白色的。

來源

2013-03-17 Kyrbi

令人吃驚的是沒有答案的地址或在這裏提到的實際問題。

CSS選擇button #rock說：「給我一個元素與ID rock內一個<button>元素」，像這樣：

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

但你想要的是一個<button>元素與的ID rock 。並且選擇器爲button#rock（注意按鈕和#rock之間的缺失空間）。

而@Greg已經提到：#rock已經足夠專門用於定位按鈕並且可以獨立使用。

來源

2014-06-19 12:45:13 maryisdead

試着改變你的CSS這個

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

...提供的圖像是在那個地方

來源

2013-03-17 13:37:28

難道它風格化它。仍然是白色。：/ – Kyrbi 2013-03-17 13:38:45

我編輯你的答案來糾正選擇器。按鈕和ID之間不應有空格。 – isherwood 2013-03-17 13:40:55

我也嘗試了完整的url來映像http：//miracz.....img/rock.png – Kyrbi 2013-03-17 13:42:06

對於一些奇怪的原因，該按鈕已被重置的寬度和高度。您還需要在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。

來源

2013-03-17 13:40:53

刪除「按鈕」＃岩石前：

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

谷歌瀏覽器爲我工作。

來源

2013-03-17 13:42:10

更換按鈕#rock 隨着 #rock

無需額外的選擇範圍。你正在使用一個特定的ID，因爲你可以。

JsBin例如：http://jsbin.com/idobar/1/edit

來源

2013-03-17 13:42:19 Greg

你需要調用類的按鈕

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

來源

2013-03-17 13:52:26 Tom

ID有什麼不好？ – Kyrbi 2013-03-17 13:54:15

給id和按鈕是複雜的，類也可以用於其他按鈕 – Tom 2013-03-17 18:10:51

-1

嘗試這種方式

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

來源

2016-11-24 08:50:33

爲了擺脫白色的你的背景色設置爲透明：

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

來源

2017-05-23 17:50:50 tourdefran

-1

只是要與左，右箭頭的圖像按鈕。爲圖像添加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>

由您自行決定

來源

2018-03-04 17:28:34 Bakhrom

<button>背景圖片

回答

相關問題