페이지와 상호 작용할 때 두 번째로 품질이 떨어지는 이미지

페이지로 이동, 크기 조절, 스크롤, 풍선 올리기 등의 방법으로 페이지가 움직이면 아이콘으로 사용 된 이미지가 다시 렌더링되어 화면이 투명한 배경에서 잘 보입니다. 원형 테두리 (예를 들어)와 같은 문제를 해결할 수있는 방법이 있습니까? http://jsfiddle.net/o3qk5uaL/페이지와 상호 작용할 때 두 번째로 품질이 떨어지는 이미지

출처

2014-10-21 SweG

은 (http://stackoverflow.com/questions [여기 살펴 본다보십시오]/9986226/when-scaling-an-css3-scale-it-become-pixelated-just-after-t)를 사용하는 것이 좋습니다. 이것은 단지 일시적인 해결책이며 일부 구형 브라우저에서는 작동하지 않을 수 있습니다. –

+1, 좋은 질문입니다. 그것은 귀찮은 일입니다. 나는 답을 가지고 있지 않다. (나는 뒷면의 가시성을 망쳐 놓았지만 작동하지 않았다.) 그래서 SVG를 대신 사용할 수있는 유일한 대안이있다. 벡터 이미지 스케일링은 훨씬 더 선명합니다. –

아니요, 웹킷 브라우저에서 크기 조정 svg는 동일한 문제가 있습니다. Firefox에서 잘 작동합니다. 그러나 Safari에서는 그렇지 않습니다. Safari가 svg의 첫 번째 상태를 일종의 비트 맵으로 캐시 한 다음 나중에 크기 조정 된 크기를 표시하는 데 사용하는 것으로 보입니다. 아무리 당신이 svg 또는 png 또는 무엇이든을 사용합니다. 해결 방법은 svg (또는 png) 다운 스케일링을 구현하고 상대적 "기본"상위 차원을 설정하고 max transform : scale (1)까지 스케일을 조정하는 것입니다. – Garavani

- 예

, 이미지, 일부 픽셀 화 말할 수 있으며, 일부 밀리 초 후에는 국경을 부드럽게 돌아갑니다 날카로운 테두리가 나타납니다 공중 선회이 경우

<body> 
    <style> 
     body{ 
      background: black; 
     } 
     img{ 
      max-width: 5vw; 
      transition: 1s ease; 
     } 
     img:hover{ 
      max-width: 6vw;  
     } 
    </style> 
    <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png"> 


</body>

, 여기 당신을위한 바이올린입니다

좋은 질문입니다!

이것은 웹 브라우저가 그림을 렌더링하는 방법과 전환이 작동하는 방식 - 그림을 동적 창 크기 비율로 바인딩하여 그림을 다시 그려야하는 경우 - 그림 크기가 다시 계산되고 브라우저 당신이 멈출 때까지 그것을 완전히 칠하지 않을 것입니다. 원본 그림의 해상도는 변경되지 않으며 그림을 새 해상도로 렌더링해야하며 브라우저에 따라 다르고 GPU에 따라 달라지는 경우 원래 해상도로 가장 잘 나타납니다.

나는 아주 동적 인 해상도 변경 아이콘으로 SVG 형식을 사용해보십시오. SVG는 XML 기반의 벡터 이미지 형식의 해상도가 없으며 상호 작용 및 애니메이션에 적합합니다.

이 비교 데모를 살펴 보자 CodePen

코드를 우리가 가지고 있기 때문에 ...

<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" /> 
<br /><br /> 
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />

출처

2014-10-21 16:03:44

페이지와 상호 작용할 때 두 번째로 품질이 떨어지는 이미지

답변

관련 문제