이거 브라우저 특성이라 어쩔 수 없는건가요??
검색어입력창에 background 로 이미지를 보이게 해 놓았는데 이게 입력창을 border-radius 값을 주기만 하면 이미지가 흐릿하게 변합니다. border-radius 값을 없애서 그냥 직사각형으로 보이게 하면 그 안에 이미지가 다시 또렷해 지구요.
물론 크롬에서는 이상이 없습니다.
이게 방법이 없나요? 저희뿐 아니라 다른곳도 보니 마찬가지더라구요.
-
-
흔한 버그인 것 같아요.
https://www.google.co.kr/#q=ie+border+radius+background+image+blur&gws_rd=cr
여러 가지 트릭이 있지만 가장 확실한 방법은 input 뒤의 다른 태그(이 태그는 가장자리가 둥글지 않아야 함)에 background-image를 주고, input 자체의 배경은 투명하게(background: transparent) 설정하는 것입니다.
-
이 태그는 가장자리가 둥글지 않아야 함 -> border-radius 를 쓰지 말라는건 아니겠죠???
background: transparent <--- 요거로 해결이 된다는거죠? 집에 IE11 이 없어서 사무실에 가면 해보겠습니다. 감사합니다. -
background-image와 border-radius를 같은 태그에 쓰지 않으면 된다는 뜻입니다. 두 개의 태그를 겹쳐 보이도록 하고, 뒤의 것은 background-image만 쓰고, 앞의 것은 border-radius만 쓰는 거죠.
-
아... 그럼 두번에 나눠서 쓰라는거군요. 포토샵에서 레이어처럼 생각하라는 거죠?? 어떤의미인지 생각해보고 나중에 해보겠습니다.
input 안에 이미지로 처리한게 더 있는데 다 그러네요. 예를 들면 로그인 input 자리에 이메일/비밀번호 표시도 역시 이미지로 처리했는데 border-radius 값이 있으니 흐릿해지는군요. IE11에서요.