將圓角添加到矩形柵格圖像

什麼是使用CSS/JS/HTML爲圖像製作類似圓角蒙版的最佳方式？所以，我需要將圓角添加到矩形圖像。我想添加4個圖形元素，比如圖像上方的這個 alt text ，以隱藏圖像的一些小部分。例如，在紅色背景頁面上使用紅色，元素爲右上角。這個解決方案的問題是我不能在複雜的背景上使用它，比如漸變或其他非平坦的填充背景。我知道有一個屏蔽功能可以在FireFox中使用，但我需要一些更通用的解決方案，它也可以在其他瀏覽器中使用。謝謝。將圓角添加到矩形柵格圖像

來源

2010-09-21 Sergei Basharov

您必須支持哪些瀏覽器？有一些CSS解決方案可以與大多數現代瀏覽器一起工作，但是如果您還需要IE6/7，它們可能無法正常工作。 – 2010-09-21 09:41:32

最好的和最簡單的方法是使用CSS3 border-radius屬性：從IE8除了

.box { 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
}

它適用於所有現代瀏覽器（工作在新的IE9雖然）。

來源

2010-09-21 09:40:20 DisgruntledGoat

我認爲這對圖像無效... – elektronikLexikon 2010-09-21 09:41:34

其實，我不認爲我現在可以使用這個項目的CSS3功能，因爲我需要它支持不同的瀏覽器，包括ie6 – 2010-09-21 09:44:06

如果IE 8不支持這個，你怎麼能說所有現代瀏覽器都支持它？ IE8並不是很久以前發佈的，可以被看作是相當現代的。另外，IE7如何處理？ – Gertjan 2010-09-21 09:44:21

這是很難在一個瀏覽器中正確使用的東西，更不用說所有常見的東西了。我建議你在服務器端進行處理。如果你使用PHP，我知道它有一個內置的圖像庫，可以使用半透明PNG。這是你最好的選擇。只需「裁剪」一次並將其保存在服務器的文件系統中即可。如果您不使用PHP，請查找等效庫。

（「裁剪」我的意思是添加一個漂亮的alpha混合效果漸變爲透明背景的圓角）。

來源

2010-09-21 09:47:30 colithium

如果您還需要在舊版瀏覽器中使用nifty corners，則可以隨時查看。

或者你可以使用上面提到的CSS邊界半徑，只是接受在IE6/7/8中它將是方形的。

來源

2010-09-21 12:53:14

您應該爲此使用CSS border-radius（如另一個答案中所述）。它確實適用於圖像。

以前回答錯過的是，您可以在所有瀏覽器（包括IE6/7/8）的CSS中使用名爲CSS3Pie的精彩小破解來支持它。

來源

2010-09-21 12:58:17 Spudley

jQuery插件lc_roundz應該動態地完成這項工作 - 即使您希望角落是透明的（例如，用於複雜背景，...）。

$("image").lc_roundz({ 
radius: 20, // corner-radius 
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original 
newid: "%oid_after_lc_roundz",  // the new ID for the canvas object. %oid will be replaced with the id of the original object 
width: -1,               // -1 uses the original image's width 
height: -1,     // -1 uses the original image's width 
replace: false,           // boolean to decide whether the original should be removed from the DOM 
corner_color: [0,0,0,0]      // this means TRANSPARENT ... R,G,B,alpha [0-255] each 
});

來源

2011-02-28 11:32:55 itsatony

將圓角添加到矩形柵格圖像

回答

相關問題