拉伸圖像，同時保留HTML5中的角落

我想達到以下問題中描述的效果，但使用CSS。我記得在某處看到現在可以用HTML5完成，但現在找不到屬性名稱。拉伸圖像，同時保留HTML5中的角落

Stretching an UIImage while preserving the corners

2012-05-04 Registered User

你將不得不使用3個不同的圖像。

首先，進入Photoshop或GIMP什麼的，並打破你有3個部分的箭頭圖像。曲線左側，箭頭部分右側。將它們保存爲3個不同的圖像。

一旦你有你的圖像。創建一個HTML圖像元素：

<img src="img-middle.jpg" />

在你的CSS，將樣式應用到之前和之後的僞元素，並添加您不希望拉伸兩個圖像位。

img:before { 
    contents: ''; 
    background: url('img-left.jpg'); 
    height: 50px; 
    width: 20px; 
    position: absolute; 
    left: -20px; 
} 

img:after { 
    content: ''; 
    background: url('img-right.jpg'); 
    height: 50px; 
    width: 40px; 
    position: absolute; 
    right: -40px; 
}

確保您更改寬度，高度，左右值以匹配兩個圖像文件的寬度和高度。這個CSS允許將圖像的這些位添加到左側和右側，而不管元素被拉長多寬。它也很酷，因爲它只有一個元素，所以CSS保持相當乾淨，除了空白內容的要求：'';屬性。

那麼你可以動態拉伸你的中間圖像元素。比方說，你想要他的箭頭伸展，讓一些jQuery動畫元素的寬度，然後中間的部分將拉伸和角落將保持完整，因爲他們在技術上不是原始元素的一部分，他們只是附加。 ETA：至於在Objective-C相關文章中描述的方法，沒有CSS屬性將這些圖像拆分開來，除非它是在我從未聽說過的一些模糊的webkit夜間構建中。你的選擇是分開其他雙方。您還可以將圖像的左側和右側部分合併爲一個精靈，並使用背景位置：; CSS屬性來選擇圖像的位，這樣你就只有兩個圖像文件請求，因爲你想保持這些低點來加快頁面加載時間。

來源

2012-05-05 00:05:46 alt

這是一個很好的答案，但不適合我的情況，因爲我需要圖像的大小是動態的，當你有像右邊的東西時：-40px;它不能動態擴展。 –

哦，所以你需要左/右部分是動態的嗎？所以它適用於任何大小的圖像具有相同的CSS？ – alt

我有3張圖片：我想要的一個（寬度自動和高度100％）中間一個（寬度100％和高度100％）右側（寬度自動和高度100％）。現在的問題是，中間的重疊左右，我看不出我能如何防止重疊... –

您可以創建一個元素，爲其左側和右側大寫分配僞元素，並使用應用於width屬性的CSS3過渡來實現此效果。

我已經設置了一個working demo on jsFiddle來說明它是如何完成的。此演示程序使用背景顏色，但也可以使用圖像（沿着X軸重複中心元素）。

查看HTML5 rocks playground，你會發現一些精彩的片段，展示了CSS3和HTML5的力量（自然而然），並且可以用它作爲快速參考。

來源

2012-05-05 00:23:57

使用邊界半徑，嘗試使用3個圖像，一個用於左上角和右下角，一個用於中間拉伸，但不與角落圖像重疊，第三個圖像用於右上角和下角。所有這些都需要有動態高度，當然還有動態寬度。 –

如果使用單個圖像作爲側蓋，則無法達到動態高度。 –

但我原來的問題是關於HTML5中的新選項，我記得看到這個，但現在找不到它 –

拉伸圖像，同時保留HTML5中的角落

回答

相關問題