背景圖像不出現在一個按鈕範圍內

這應該是你很容易，我希望:) 我想重複背景圖像做三個按鈕。我使用兩個<button>和一個鏈接<a>。它適用於鏈接而不是按鈕 - 側面圖像（圓角）不會出現。下面是HTML：背景圖像不出現在一個按鈕範圍內

<!doctype html> 
<html> 

<head> 
    <title>Task 1</title> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> 
    <link rel="stylesheet" type="text/css" href="task1.css"> 
</head> 

<body> 
<button class="blue-btn"><span id="left">&nbsp;</span>OK<span id="right">&nbsp;</span></button><br/> 
<button class="blue-btn"><span id="left">&nbsp;</span>Cancel<span id="right">&nbsp;</span></button><br/> 
<a href="#" class="blue-btn"><span id="left">&nbsp;</span>View More Information<span id="right">&nbsp;</span></a> 
</body> 
</html>

這裏是CSS：

.blue-btn{ 
    background: url('button-repeat.png') repeat-x; 
    border:0; 
    height:55px; 
    font: 14px/44px Myriad-Pro, sans-serif; 
    color:black; 
    cursor:pointer; 
} 
a{ 
    display:inline-block; 
    text-decoration:none; 
} 
#left{ 
    display:block; 
    background: url('button-left.png') no-repeat; 
    height:55px; 
    width:24px; 
    float:left; 
    margin-left:-24px; 
} 
#right{ 
    display:block; 
    background: url('button-right.png') no-repeat; 
    height:55px; 
    width:24px; 
    float:right; 
    margin-right:-24px; 
}

來源

2013-03-21 maniuni

ID都是唯一的** **。您不能在頁面上多次使用'id =「left」'或'id =「right」'。你應該使用'classes'作爲這個：'class =「left」'和'class =「right」'。 – 2013-03-21 13:52:20

與@JamesDonnelly一起，一旦從ID切換到HTML中的類，您可以使用句點「。」引用CSS中的類，例如：.right {}或.left {} – Michael 2013-03-21 13:57:55

哦，是的 - 我忘了關於這一點，謝謝！ – maniuni 2013-03-21 15:00:18

我敢肯定你不能這樣做。您可能不得不放棄使用<button> s並將常規元素（可能爲<a>,<span>或<div>）設置爲看起來像按鈕。

來源

2013-03-21 13:49:58 Adrian

謝謝！它適用於 s。我知道這很簡單:) – maniuni 2013-03-21 15:09:33

嘗試造型您的按鈕，而不使用跨度，而是使用多個背景圖像和多個位置。

.button { 
background-image: url(), url(); 
background-position: left top, right top; 
}

*請注意，IE 8和IE9是not supported。

來源

2013-03-21 14:02:37 Michael

這是一個我沒有想到的選項，謝謝！ – maniuni 2013-03-21 15:11:38

這是可能的一些位置魔術。製作blue_btn位置：相對和左右部分應位於：絕對位置。也不要使用id的樣式，添加一些有意義的類名到按鈕部分。

.blue-btn{ 
    position: relative; 
} 

.btn-right { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 10px; 
} 
.btn-left {  
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 10px; 
}

Jsfiddle

來源

2013-03-21 14:17:14 XiNiX

背景圖像不出現在一個按鈕範圍內

回答

相關問題