Question

我有一个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>

Answer 1

您的图片颜色为白色：http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png

在Photoshop或其他一些照片编辑程序中打开文件。然后对所需的颜色进行颜色叠加。在Photoshop中，它将是“menu＆gt; layer＆gt; layer style＆gt; color overlay”。保存，然后上传文件。

最好只使用现有的橙色图像。只需使用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);
}

这样会减少少一个图像。

编辑：

查找代码：

.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);
}

Answer 2

第262行：

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

你需要为这个精灵添加一个新图像（或者作为一个完整的新图像），这是你想要的颜色。

更改jQueryUI对话框关闭X的颜色

2 个答案: