검색어 : jquery blockui no background
css background color 투명,blockUI
css background color 투명
jquery blockui 이미지 출력시 박스없애기
jquery blockui, message color
나는
$.blockUI({
message:"<img src='images/ajax-loader-131415.gif' /> <p style='color:white;'> Wait.... </p>" ,
css : {
backgroundColor: 'rgba(0,0,0,0.0)', //배경투명하게
color: '#000000', border: '0px solid #a00' //테두리 없앰
}
});
이렇게 두고 gif를
http://www.ajaxload.info/ 에서 백그라운드 컬러는 나의 웹 백그라운드 컬러와 맞춰서 다운 받아서 적용시켰다.
이제 message에 색 넣는거 해야한다.( http://kilver.tistory.com/3 )
rgba(0,0,0,0.5)' 에서 'rgba(0,0,0,0.0)' 으로 고쳤더니 약간의 배경있던거 사라졌다.
http://instance-of.com/archives/1656
CSS로 투명도를 조절하는 방법은 몇가지가 있다.
내가 기존의 알던 방법은 opacity 속성을 조절 하는것 이었는데, 문제가 있었다. 나는 div의 컨텐츠는 불투명 하게 나오면서 div의 백그라운드만 50% 투명도를 주고 싶었다. 그래서
1 | div.myclass { |
2 | background-color: black; |
3 | opacity: 0.5; |
4 | } |
이렇게 속성을 줬는데, 컨텐츠 까지 투명해지더라. 다른 방법을 찾던중 rgba 값을 알게 되었다.
1 | div.myclass { |
2 | background-color: rgba(0,0,0,0.5) |
3 | } |
이렇게하면 배경의 투명도만 조절할 수 있다.
IE9+, Firefox 3+, Chrome, Safari, 그리고 Opera 10+ 에서 사용 가능하다.
투명 gif, png 이미지를 배경에 입혀서 투명 처리를 한 경험이 있을것이다.
하지만, IE6~7 브라우저 사용률 저하와 필요이상으로 사용되었던 이미지 보다 CSS 활용도가 높아짐에 따라
CSS background의 rgba를 활용한 투명 처리와 IE 크로스브라우징 하는 방법을 소개하겠습니다.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | body { background: #96C653; }p { padding: 10px;background: #000; color: #fff; }div { margin: 5px 0; padding: 10px; height: 200px; color: #fff; }#rgba { background: rgba(0, 0, 0, 0.5); /* IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. 컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값. startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것. 하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다. */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000); zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */}#opacity { background: #000; opacity: 0.5; filter: alpha(opacity=50); } |
HTML
DOM element의 투명도를 결정하는 opacity, 배경의 투명도를 결정하는 background rgba.
[참고]
- jsbin 소스보기
- 참고 가이드
- Generate 제공
[별참 - GradientType은 그라데이션 방향]
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');
http://forum.jquery.com/topic/jquery-no-background-in-blockui-plugin
| jquery 모바일 이미지 슬라이드 (0) | 2014.09.24 |
|---|---|
| [모음] jQuery Slide 슬라이드/스크롤 (0) | 2014.09.24 |
| jQuery 팁2 - ajax로 폼값 쉽게 넘기기 serialize() (0) | 2014.09.17 |
| [jQuery] BlockUi (0) | 2014.09.17 |
| if문 c:if (0) | 2014.09.16 |