位置圖像與按鈕上的CSS雪碧

我想用CSS來做下面的圖像來構建按鈕，然後用圖像精靈顯示按鈕的中心內容。位置圖像與按鈕上的CSS雪碧

enter image description here

這裏是我到目前爲止，我無法讓我的子畫面圖像正確定位代碼演示。任何幫助改善這個CSS看起來更像我的圖片上面會很好。我認爲實際的HTML結構也可以改進？

HTML

<div class="switch-wrapper"> 
    <div class="switcher left selected"> 
     <span id="left">...</span> 
    </div> 
    <div class="switcher right"> 
     <span id="right">...</span> 
    </div> 
</div>

CSS

/* begin button styles */ 

.switch-wrapper{ 
    width:400px; 
    margin:220px; 
} 

.switcher { 
    background:#507190; 
    vertical-align: bottom; 
    position: relative; 
    display: inline-block; 
    max-width: 100%; 
    vertical-align: bottom; 
    box-shadow: 1px 1px 1px rgba(0,0,0,.3); 
} 
#left{ 
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png); 
    background-position: -0px -0px; 
} 


#right{ 
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png); 
    background-position: -0px -17px; 
} 


.left{ 
    border-radius: 6px 0px 0px 6px; 
    width: 45px; height: 38px; 

} 
.right{ 
    border-radius: 0 6px 6px 0; 
    width: 45px; height: 38px; 
    margin: 0 0 0 -6px 

} 

.switcher:hover, 
.selected { 
    background: #27394b; 
    box-shadow: -1px 1px 0px rgba(255,255,255,.4), 
    inset 0 4px 5px rgba(0,0,0,.6), 
     inset 0 1px 2px rgba(0,0,0,.6); 
} 

.switcher::after { 
    content: ' '; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    border: solid 0px #1B1B1B; 
    border-radius: 6px; 


}

來源

2012-03-27 JasonDavis

HTML結構改進：如果你想設計按鈕，然後用'button'元件或其他可聚焦元件等'輸入[類型「提交|圖像|按鈕」]或者可能是一個鏈接（我猜這裏是錯誤，按鈕或圖像）。使用鍵盤的人們將能夠使用它們，屏幕閱讀器等輔助技術將很容易理解它們在頁面中的功能。在按鈕中使用HTML圖像（或通過輸入[type =「image」]中的@src）而不是sprite CSS將允許在禁用圖像時顯示某些內容（替代文本）（也適用於Windows中的高對比度模式），但CSS啓用。 – FelipeAls 2012-03-27 06:17:10

座&聯方法

http://dabblet.com/gist/2213271

絕對方法

http://dabblet.com/gist/2213121

來源

2012-03-27 06:06:25

謝謝，這是迄今爲止最接近我的目標。在我看到的所有例子中，似乎使精靈圖像變小了，那麼實際圖像位於http://www.codedevelopr.com/assets/images/switcher.png，你是否知道爲什麼會發生這種情況？ – JasonDavis 2012-03-27 19:53:46

我不清楚你的意思是「小於實際圖像」。但在代碼中#left和#right span沒有任何寬度。在這些跨度內有3個點（...）。這給了那些寬度。但實際的精靈圖像比這個寬度大。如果將計數從3個點增加到4個，則可以清晰地看到圖像。你必須設置寬度和高度，並使用任何圖像替換，如 - font：0/0 a;或文本縮進：-999em ;. – 2012-03-28 09:17:05

嗨，你還沒有定義在絕對位置#left & #right，所以我通過控制精靈圖片絕對定位。

您可以通過在位置上，左，下的變化調整自己的圖像，右邊你需要什麼....

這是你更新的CSS： -

.switch-wrapper{ 
    width:400px; 
    margin:220px; 
} 

.switcher { 
    background:#507190; 
    vertical-align: bottom; 
    position: relative; 
    display: inline-block; 
    max-width: 100%; 
    vertical-align: bottom; 
    box-shadow: 1px 1px 1px rgba(0,0,0,.3); 
} 
#left{ 
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png); 
    background-position: -0px -0px; 
    background-position: 16px -16px; 
    height: 15px; 
    left: 15px; 
    position: absolute; 
    top: 12px; 
} 


#right{ 
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png); 
    background-position: -0px -17px; 
    background-position: 0 -29px; 
    left: 15px; 
    position: absolute; 
    top: 13px; 
} 


.left{ 
    border-radius: 6px 0px 0px 6px; 
    width: 45px; height: 38px; 

} 
.right{ 
    border-radius: 0 6px 6px 0; 
    width: 45px; height: 38px; 
    margin: 0 0 0 -6px 

} 

.switcher:hover, 
.selected { 
    background: #27394b; 
    box-shadow: -1px 1px 0px rgba(255,255,255,.4), 
    inset 0 4px 5px rgba(0,0,0,.6), 
     inset 0 1px 2px rgba(0,0,0,.6); 
} 

.switcher::after { 
    content: ' '; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    border: solid 0px #1B1B1B; 
    border-radius: 6px; 


}

或者看到現場演示： -http://dabblet.com/gist/2213048

來源

2012-03-27 06:06:03

位置圖像與按鈕上的CSS雪碧

回答

相關問題