본문 바로가기 메뉴 바로가기

amanda의 공간입니다

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

amanda의 공간입니다

검색하기 폼
  • 분류 전체보기 (225) N
    • WebPublisher (218) N
      • HTML 마크업 (11)
      • CSS (30)
      • JavaScript & jQuery (61)
      • Git (5)
      • React (3)
      • PHP & ASP (9)
      • tip (7) N
      • Interactive (22)
    • break (5)
  • 방명록

익스트랜스폼 (1)
[transform] translate(-50%, -50%) 이미지 흐림 + IE에서 translate calc 적용

이미지를 가운데 정렬하기 위해 css에 transfrom translate(-50%,-50%) 사용시 이미지가 흐려지는 경우가 있는데 transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) 위처럼 + 0.5px씩 더해주면 흐림 현상이 덜함 그런데 익스플로러에서는 translate 안에 calc가 들어가면 적용이 안됨 이런 경우에는 calc로 쓴 부분을 아래와 같이 분리해주면 됨 transform: translate(-50%, -50%) translate(0.5px, 0.5px)

WebPublisher 2021. 3. 1. 14:19
이전 1 다음
이전 다음
공지사항

Blog is powered by Tistory / Designed by Tistory

티스토리툴바