2

jQueryUI ダイアログがありますが、それを閉じるための X は背景と同じ色です。どうすれば変更できますか。彼らのサイトでホストされている jqueryUI CSS を使用しましたが、動作するので、それが私の jQuery テーマに違いありません。http://www.tapmeister.com/dialog/に実際の例があり、コードを以下に示します。ありがとう

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <meta name="robots" content="noindex" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="css/ui-lightness/jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
        <style type="text/css">
            .ui-dialog-titlebar { border:0; background:none; color:#000000; }
        </style> 

        <script type='text/javascript'>
            $(document).ready( function() {$("#dialog").dialog({autoOpen: true});});
        </script>

    </head>

    <body>
        <div id="dialog" title="Title">Hi There!</div>
    </body>
</html>
4

2 に答える 2

3

画像の色は白です: http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png

Photoshop またはその他の写真編集プログラムでファイルを開きます。次に、必要な色にカラー オーバーレイを行います。Photoshop では、「メニュー > レイヤー > レイヤー スタイル > カラー オーバーレイ」になります。保存してから、ファイルをアップロードします。

既存のオレンジ色の画像を使用するだけの方がよい場合があります。CSS不透明度を使用するだけです。

.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}

このようにして、呼び出されるイメージが 1 つ少なくなります。

編集：

コードを検索:

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}

と置換する：

.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}
于 2012-10-11T16:02:26.097 に答える
2

262 行目:

.ui-widget-header .ui-icon {
 background-image: url("images/ui-icons_ffffff_256x240.png");
}

必要な色である新しい画像をこのスプライトに（または完全に新しい画像として）追加する必要があります。

于 2012-10-11T15:58:31.863 に答える