剪出圖像的中間部分（顯示示例）？

這是我見過的Grooveshark完成的工作，它不需要使用多個圖像來擴展按鈕等。剪出圖像的中間部分（顯示示例）？

基本上，這樣

enter image description here

的圖像被用於產生任何寬度比所述圖像本身更小的按鈕。我認爲這是通過某種方式修剪中間，但我不知道如何。我已經查看了CSS屬性的使用情況here但似乎無法找出除了填充任何一邊15px之外做了什麼。

有誰知道如何複製相同的效果？爲了清楚起見，我正在討論的是切出一個按鈕的中間部分（我知道我已經給出了4個按鈕樣式的精靈圖片，所以當我說「切除圖像的中間部分」）。

來源

2011-09-30 Avicinnian

你說什麼是被稱爲sliding doors技術。通過將背景圖像應用於容器元素以顯示左邊緣，可以將相同的圖像應用於僅顯示右邊緣的另一個元素。

例如：

.menu li { 
    background: url(button-sprite.png) 0 0 no-repeat; 
    padding-left: 10px; 
} 

.menu li a { 
    background: url(button-sprite.png) 100% 0 no-repeat; 
    display: block; 
}

列表項示出了圖像的左邊緣。填充允許左邊顯示何時將另一個元素放置在頂部。

錨點元素顯示圖像的右邊緣，並將其裁剪爲文本內容的所需寬度。

來源

2011-09-30 05:48:41

但是，您如何讓''元素向右擴展背景圖像而不是向左，因爲默認情況下，圖像的右邊緣在任何中間點之前都需要顯示？當然一個簡單的「float：right;'不會做？ – Avicinnian

你說'background-position：right'，它會一直「粘」到右邊。 – CyberDude

+1與CSS兼容是一個問題的完美答案 – Serdalis

我知道沒有辦法處理圖像一樣，在CSS，
我想你會發現，他們要做的是有頂部圖像和底部圖像總是頂部和底部，只需填寫其餘與中間圖像。這也適用於每一方，我將添加CSS3代碼，CSS2代碼應該很容易確定。

這看起來像（CSS3）：

.button_horizontal { 
    background: url(topimage) top left no-repeat, 
       url(bottomimage) bottom left no-repeat, 
       url(middleimage) top left repeat-y; 

} 


.button_vertical { 
    background: url(left.png) top left no-repeat, 
       url(right.png) top right no-repeat, 
       url(middle.png) top left repeat-x; 
}

這看起來像（CSS2）：

.top { 
    background: url(top.png) top left no-repeat; 
    width:100%; 
    height:10px; 
} 

.middle { 
    background: url(bottom.png) bottom left no-repeat; 
    width:100%; 
    height:180px; 
} 
.button{ 
    background: url(middle.png) top left repeat-y; 
    width:500px; 
    height:200px; 
} 

<div class="button"> 
    <div class="top">&nbsp;</div> 
    <div class="middle"><p>stuff goes in here :D</p></div> 
</div>

來源

2011-09-30 05:41:22 Serdalis

啊，所以在這個例子中，它將是一個CSS3多圖像背景，每個圖像的背景位置屬性被設置？ – Avicinnian

是的，它會。儘管如此，我也會爲你準備一個CSS2版本。 – Serdalis

CSS允許將背景圖像移動到任何位置。爲了顯示你需要定義像下面的CSS背景的一部分：

.button { 
    background: transparent url(sprite.png) left top no-repeat; 
    display: block; 
    height: 40px; 
    width: 160px; 
} 
.button:hover { 
    background-position: left bottom; 
} 
.button:focus { 
    background-position: left center; 
/* or 
    background-position: left -50%; 
    background-position: left -40px; 
*/ 
}

來源

2011-09-30 05:49:50 Andrey

@Pixelatron;我知道你接受了答案，但檢查這個例子可能是是幫助您輕鬆&解決方案，以及http://jsfiddle.net/sandeep/CQmJz/

CSS：

a{ 
    text-decoration:none; 
    display:inline-block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0; 
    position:relative; 
    padding:8px 0 8px 10px; 
    height:17px; 
} 
a:after{ 
    content:""; 
    display:block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0; 
    position:absolute; 
    height:33px; 
    width:10px; 
    top:0; 
    right:-10px; 
} 


a:hover{ 
    background-position:0 -34px; 
} 
a:hover:after{ 
    background-position:-490px -34px; 
}

來源

2011-09-30 06:11:42 sandeep

道具，一個很好的例子:)！ – Avicinnian

這就是所謂的border-image。

來源

2011-09-30 06:25:03

剪出圖像的中間部分（顯示示例）？

回答

相關問題