自定義透明css造型爲jquery移動按鈕

Question

我看到這邊的按鈕（http://letsgo.gorizia.it/），並想知道如何實現這樣的風格？

有沒有一個有用的教程，或者你能給我一個提示，我應該使用的CSS？

Answer 1

我想你可以看看this post on StackOverflow:

您應該使用RGBA它就像郵局

.alpha60 { 

    /* Fallback for web browsers that don't support RGBa */ 
    background-color: rgb(0, 0, 0); 

    /* RGBa with 0.6 opacity */ 
    background-color: rgba(0, 0, 0, 0.6); 

    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
    } 

本網站說：

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

這應該給你你想要的效果。

你可能仍然需要尋找角落的四捨五入，但現在用css3應該不會那樣，儘管找到。

Also W3schools have a page about it。我知道這不是最可靠的網站，但它可以很方便地使用一些小技巧或技巧，而這些技巧或技巧你無法輕鬆找到。

Answer 2

使用RGBA背景色應該做的伎倆：

.ui-btn { background-color: rgba(0,0,0,.25); } 

類似的東西應該工作，但你要與顏色（前三個值）和透明度本身（最終值）打

Answer 3

將錨標記添加到您的代碼並將其設置爲HREF爲任何你想要的。然後去Photoshop，併爲該按鈕生成一個圖像。

如果您嘗試在CSS中執行此操作，並設置容納Anchor的容器的不透明度，則不透明度將過濾到錨點的文本。沒有好，所以......

您的最終定位標記應該是這個樣子：

<a href="whereever.com"><img src="myButton.png" /></a> 

（請確保您的圖像是.PNG因爲.JPEG不支持透明度）

Answer 4

我不能」當我將它作爲一個類添加到按鈕或帶有data-role =按鈕的錨標籤時，可以使alpha60類產生任何效果。 JQM框架覆蓋了那個CSS，我想（但我不知道...如果有人這樣做，學習會很有趣）。

什麼工作對我來說是UI的BTN-UP-A（或B或C或任何你的CSS主題）像這樣（用數據爲主題的藍色按鈕= 'B'）

.ui-btn-up-b { 
    background: rgba(0, 0, 255, 0.2); /* set the alpha to taste...*/ 
} 

我認爲特別好的一點是，按鈕在懸停時變得不透明，並保持其點擊（按鈕）屬性，因此用戶確實知道他們正在與按鈕交互，否則他們可以閱讀任何背後的內容按鈕。

當然，所有關於不使用rgba的瀏覽器的注意事項仍然適用，因此如果您的用戶羣包含舊版瀏覽器，則應該使用fallback css來強化它。