1

私はこちら側（http://letsgo.gorizia.it/）にそのボタンを見て、そのようなスタイルをどのように実装するのか疑問に思いましたか？

便利なチュートリアルはありますか、それとも私が使用すべきcssのヒントを教えてください。

ここに画像の説明を入力してください

4

4 に答える 4

3

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ではそれを見つけることはできません。

また、W3schoolsにはそれに関するページがあります。私はそれが最も信頼できるサイトではないことを知っていますが、それを簡単に見つけることができないいくつかの小さなヒントやコツには便利です。

于 2012-07-06T13:16:54.250 に答える
0

背景色にRGBAを使用すると、うまくいくはずです。

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

そのようなものは機能するはずですが、色（最初の3つの値）と不透明度自体（最後の値）を試してみることをお勧めします

于 2012-07-06T13:18:15.753 に答える
0

alpha60クラスを、data-role = buttonが割り当てられたボタンまたはアンカータグにクラスとして追加したときに、効果を発揮させることができませんでした。JQMフレームワークはそのcssをオーバーライドすると思います（しかし、私はそれを知りません...誰かがそうするなら、学ぶことは興味深いでしょう）。

私のために働いたのは、このようなui-btn-up-a（またはbまたはcまたはあなたのcssテーマが何であれ）でした（data-theme ='b'のある青いボタンの場合）

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

特に良かったのは、ホバーするとボタンが不透明になり、クリック（ボタンダウン）プロパティが維持されるため、ユーザーはボタンを操作していることを実際に認識できますが、それ以外の場合は、ボタンの背後にあるコンテンツを読み取ることができます。 。

もちろん、rgbaを実行しないブラウザーに関するすべての注意事項は引き続き適用されるため、ユーザーベースに古いブラウザーが含まれている場合は、フォールバックcssを使用して堅牢にする必要があります。

于 2013-01-29T03:10:24.813 に答える
-1

コードにアンカータグを追加し、HREFを任意に設定します。次に、Photoshopに移動して、そのボタンの画像を生成します。

CSSでこれを実行しようとし、アンカーを保持しているコンテナの不透明度を設定すると、不透明度はアンカーのテキストにもフィルターされます。だめだ...

最終的なアンカータグは次のようになります。

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

（.JPEGは透明度をサポートしていないため、画像が.PNGであることを確認してください）

于 2012-07-06T13:18:40.243 に答える