帶拉伸背景的圖像角上的圓角邊框

Question

我有數百張圖像將被隨機加載和顯示，然后更改為另一幅圖像（有4個圖像框，每個圖像框顯示一個特定的圖像10秒鍾，然后變為另一個完全隨機的圖像。）

現在這些圖像需要四舍五入，但是我嘗試了我能想到的所有可能方法。 由於背景被拉伸（液體模板），因此無法使用透明圖像將圖像放置在帶有圓角的圖像上。

我已經嘗試過將javascript的圖像圓角（js角）（不適用於圖像過渡和過多的延遲），試圖使用圖像放置在頂部（看起來很恐怖），css圓角（需要更多的跨瀏覽器） 。 我能想到的唯一方法是PHP，但是這確實占用大量CPU，並且會有很多圖像。

我正在尋找一些想法，也許是不同的背景圖像和每種分辨率的位置，而不是單個拉伸的背景？ 但我寧願不要將加載時間加倍。

有任何想法嗎？

• 史蒂夫

Answer 1

嘿嘿，試試這個 :)工作正常，我...]

Answer 2

這幾乎不是一個解決辦法，但是IE9將在2011年支持CSS border-radius。當然，許多人將在相當長的時間內使用IE7 / 8，因此這不是理想的選擇。

這里講了一個可能使用的技巧： http : //www.htmlremix.com/css/curved-corner-border-radius-cross-browser 。 我還沒有嘗試過，但是將來會。

希望這可以幫助，

詹姆士

編輯：我不確定這是否會使您的圖像彎曲，盡管它可能會-快速瀏覽源代碼似乎.htc文件實際上逐像素創建了轉角半徑。