2012-10-11 1 views
2

jQueryUI 대화 상자가 있지만 닫으려는 X는 배경과 같은 색상입니다. 내가 어떻게 바꿀 수 있겠 어. 나는 jqueryUI CSS를 자신의 사이트에서 호스팅하고 사용했기 때문에 jQueryUI가 내 jQuery 테마 여야합니다. http://www.tapmeister.com/dialog/에 실례가 있는데 아래에 코드가 나와 있습니다. 감사합니다jQueryUI 대화 상자의 색상 변경 X

<!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> 

답변

3

귀하의 이미지 색상은 흰색입니다 : http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png

열기 포토샵에서 파일 또는 다른 사진 편집 프로그램입니다. 그런 다음 원하는 색상으로 색상 오버레이를 수행하십시오. 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); 
} 

이렇게하면 이미지가 하나 더 적습니다.

편집 :

찾기 코드 :

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

이미지의 URL을로드하지 못했습니다. – user1032531

+0

예제가 작동하지 않는 것 같습니다. – user1032531

+0

필터 : 알파 (opacity = 40); 옳은? – user1032531

2

라인 262 :

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

당신은 당신이 원하는 색상이 스프라이트 (또는 완전히 새로운 이미지 등)에 새로운 이미지를 추가해야합니다.

+0

내가 전에 스프라이트와 함께 일한 적이 없어요. 나는 그 중 몇 개를 디렉토리에 갖고있는 것 같다. ui-icons_222222_256x240은 검은 색이므로 작동해야합니다. ui-icons_ffffff_256x240을 사용하지 않고 ui-icons_222222_256x240을 사용하는 것으로 변경하는 가장 좋은 방법은 무엇입니까? – user1032531