이 글에서는 사진의 불투명도를 조절하는 것과 칼라를 흑백으로 하여 이미지를 롤오버하는 것에 대해서 알아본다. 이것은 우리나라 사람이 많이 사용하는 익스플로러 7,8에서도 되니 걱정 말기 바란다. 내가 아래에서 하는 것은 http://min-blog.tistory.com에서 많이 사용하는 방법이다.

 
이미지의 불투명도 조절


위 사진은 투명도 조절을 사용한 롤오버이다. 크롬,사파리,파이어폭스,익스플로러9/10 등 최신 브라우저는 CSS3의 Opacity를 지원하여 간단히 opacity 수치를 주면 된다. 그러나 우리나라 사람이 많이 사용하는 익스플로러 7,8의 경우 CSS3의 Opacity 속성을 지원하지 않아 filter:alpha(opacity=수치)을 더해야 한다. 익스플로러.... 


모든 익스플로러(IE)와 크롬(Chrome),사파리(Safari),파이어폭스(Firefox) 등에서 만족하도록 하고 싶다면  opacity:수치; filter:alpha(opacity=수치) 처럼 해야 한다. 예로 아래는 opacity:0.7; filter:alpha(opacity=70); 라고 했다. 참고로 opacity를 불투명도라고 하고, 투명도는 transparency라고 한다.


컬러를 흑백으로



위는 컬러를 흑백으로 만드는 경우이다. 나의 익스플로러8,크롬,사파리,파이어폭스로 봤더니 제대로 나왔다. IE Tester로 익스플로러7로 봤고 거기서도 잘 나왔다.원본 사진에 아래 소스를 추가한다. 


filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

-webkit-filter: grayscale(0%);


그리고 마우스 포인터를 사진에 가져갔을 때 흑백으로 변하게 하기 위해서 아래 소스를 추가한다. CSS에서 마우스 포인터가 링크에 갔을 때의 선택자는 hover라는 것은 CSS를 공부한 사람은 알 것이다. 아래 소스에서 롤오버하면 흑백으로 되는 브라우저가 나와있으니 참고 바란다. 참고로 IE는 익스플로러,Firefox는 파이어폭스,Chrome은 크롬,Safari는 사파리이다. 익스플로러만 말하면 아래에 익스플로러 버전에서 6에서 9는 흑백으로 되고 10은 안 된다고 나왔다. 모든 브라우저가 흑백으로 되는 것은 아니라는 것을 알았으면 한다.


filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */


그런데 이것은 컬러사진과 흑백사진에 각각 소스를 삽입해야 하므로 상당히 귀찮다. 최근에 알았는데 아래와 같이 흑백이 컬러로 나오는 것이 효과가 좋은 것 같다. 컬러에서 흑백으로 변하는 것은 별로인 것 같다. 그냥 내 생각이다.



댓글 12
  1. BlogIcon 솜다리™ 2013.05.19 10:41 신고  댓글주소  수정/삭제  댓글쓰기

    와...신기하내요..
    마우드를 올리니 흑백으로...^^

    • BlogIcon 백전백승 2013.05.19 11:48 신고  댓글주소  수정/삭제

      처음보면 신기한데 자주 보면 그렇게 신기하지 않게 됩니다. 제 메인 티스토리인 http://min-blog.tistory.com에서 흑백으로 변하는 것은 매일 보거든요.

    • BlogIcon 백전백승 2013.05.19 11:52 신고  댓글주소  수정/삭제

      생각해보니 jQuery에 사진을 흑백 등 다양한 필터로 효과를 주는데 솜다리님처럼 사진을 주로 찍는 분에게 아주 유용하겠는데요. 포토샵에서 보던 필터 효과를 보여주는데 저에게는 필요없어 넘어갔거든요.

  2. BlogIcon 킴요미뱀프 2013.09.03 15:56 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 백전 백승님, 다름이 아니라 해당 롤오버 글을 보고 너무 하고 싶어서
    시도 해보던중 안되서 문의 글올려요 ㅠㅠ

    우선 class를 줘서 사용했는데요 크롬에서는 되나 익스에서 작동이 안되네요 ㅠㅠ

    테스트를 해보았는데요
    관련지식이 없어서 뭐가 잘못 된건지 잘몰라 질문 드립니다..
    조언을 부탁드리옵니다..

    • BlogIcon 백전백승 2013.09.04 00:07 신고  댓글주소  수정/삭제

      스킨을 변경해서 이미지가 현재 없는데 익스플로러 10으로 보니 안 됐습니다. 전에 적으려고 했는데 못 적었는데 익스플러러 10에서는 안되는 모양입니다. 그리고 파이어폭스 일부 버전에서도 안되는 모양입니다.

      글의 빨간색 소스에 보면 파이어폭스(Firefox) 10이상,크롬(Chrome) 19이상,사파리(Safari) 6이상,익스플로러(IE) 6~9에서 된다고 나왔습니다.

    • BlogIcon 백전백승 2013.09.04 00:18 신고  댓글주소  수정/삭제

      웹디자인시 걸리는 것이 익스플로러입니다. 모든 버전의 익스플로러에서 완벽히 되기 위해서는 불투명도를 조절하는 것을 사용해야 합니다.

      만약 CSS3의 트랜지션을 적용하려면 익스플로러 6,7,8,9를 포기해야 합니다. 여기는 CSS3의 트랜지션을 사용한 것이 보이거든요. 항상 걸리는 것은 익스플로러인데 선택은 킴요미뱀프님입니다. 익스플로러의 특정 버전이나 익스플로로를 포기하느냐 마느냐의 선택입니다.
      관련글은 http://min-blog.tistory.com/1250를 보세요.

  3. BlogIcon 킴요미뱀프 2013.09.03 15:59 신고  댓글주소  수정/삭제  댓글쓰기

    소스가 안올라가서... 댓글을 하나더 남겨요

    음소스가 올라가질 않네요...

    .클래스명 { 올려주신내용}
    .클래스명 호버 {올려주신내용}

    <이미지 src="경로" 클래스="클래스명">
    간단하게 이렇게만 해서 테스트 했습니다..

  4. BlogIcon 킴요미뱀프 2013.09.04 14:25 신고  댓글주소  수정/삭제  댓글쓰기

    먼저 답변에 감사드립니다!!
    소스가 안올라간다는것은, 댓글에 제가 테스트한 소스가 안올라간다고 한거 였습니다.

    해당 소스와 다른 소스를 섞어서 해결하였습니다.
    정보 감사드립니다^^

    • BlogIcon 백전백승 2013.09.04 15:58 신고  댓글주소  수정/삭제

      그 말씀이셨군요. 제가 그때 다른 글을 편집하다가 와서 댓글인지 몰랐거든요. 그 문제를 해결하셨다니 저도 기쁩니다.

      PS. 질문 덕분에 이 글의 이미지를 스킨을 변경해도 엑박이 안 생기게 했어요.

  5. soaem 2014.01.15 17:22  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 많은 도움이 되었습니다. 이미지의 불투명도 조절.. 이 글을 찾기 위해 얼마나 했맸던지요
    제 사이트에 적용 잘해서 잘 작동되는걸 보니 너무 기쁘네요.
    그나저나 같이 올려주신 컬러를 흑백으로는 제컴퓨터에서는 작동이 안되는것 같네요?
    구경하려했더니 아쉽네요. 저만그런가요? IE10쓰고 있습니다.

  6. BlogIcon 홈짱 2015.10.30 14:34  댓글주소  수정/삭제  댓글쓰기

    좋은 팁 공유 감사합니다.