간단한 URL에서 스킨을 얻을 수 없어 HTML+CSS만으로 스킨을 표시할 수 없습니다. 자세한 내용은 다음 기사를 참조하십시오.
마인크래프트 스킨 얻기

1, 스킨 획득

현재 다음 URL에서는 스킨을 검색할 수 없습니다.

스킨을 얻는 것은 보기 힘들 것 같지만, 실은,

http://skins.minecraft.net/MinecraftSkins/＜プレイヤー名＞.png

에 액세스하는 것만으로 스킨을 얻을 수 있다.

사용자 이름이 yuta0801이면, 이렇게 된다.

http://skins.minecraft.net/MinecraftSkins/yuta0801.png

이제 위와 같은 스킨을 얻을 수 있다.

2, 확대

CSS에서 width 또는 height를 변경하면 아래와 같이 흐려집니다.



실은 브라우저의 이미지 렌더링 엔진이 조금이라도 자연스럽게 보이도록 엣지를 흐리게 하고 있는 것이 원인.

이것만은 어떻게 할 수 없다고 생각했지만, 요전날, image-rendering 라는 프로퍼티를 찾을 수 있었다.

이 속성을 사용하여 이미지를 렌더링하는 방법을 지정하여 모서리를 흐리게 만들 수 있습니다.

현재, 이 프로퍼티는 CSS로 정식으로 채용된 것이 아니기 때문에, 브라우저에 의해 값이 다르다.

Can I use 를 보면 Edge 이외의 주요 브라우저는 사용할 수 있다.

Edge인데 깨끗한 Edge를 표현할 수 없다.

이하의 코드를 적응시키면, IE, Firefox, Chrome, Safari에서 깨끗이 표시할 수 있다.

.pixelated {
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
  image-rendering: -webkit-crisp-edges;       /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */           
}

위의 스타일을 적응시키면 이렇게 된다.

4, 자르기

이미지 자르기는 CSS 클립

.clipped {
  position: absolute;
  clip: rect(上 左 下 右);
}

처럼 쓸 수 있습니다.

확대하기 전의 스킨의 머리의 위치는,



왼쪽 위에서 8px, 8px에서 8px의 정사각형이므로, 확대 전은,

.clipped {
  position: absolute;
  clip: rect(8px 16px 16px 8px);
}

라고 쓸 수 있다. 그리고는 각각의 값에 확대 배율을 곱할 뿐.

스킨의 크기는, 64 x 32 (1.8 이후는 64 x 64)이므로 width: 512; 를 지정했을 경우는
512 / 64 = 8 그러므로 각각의 값에 8을 곱해, 이하와 같이 된다.

.clipped {
  position: absolute;
  clip: rect(64px 128px 128px 64px);
}

여기까지 이런 머리를 잘라낼 수 있었다.

5, 공백 제거

4까지로 스킨을 취득해 확대해 머리를 빠져나갔지만, 실은 머리 이외의 부분을 지운 것은 아니고 보이지 않게 했을 뿐이므로, 원의 화상의 크기의 공백이 생겨 버린다.

그래서 마이너스 여백을 붙여 여분의 공백을 상쇄한다.

앞의 예의 경우라면, 머리의 종횡을 각각 마이너스의 마진으로서 준다.

.clipped {
  position: absolute;
  clip: rect(64px 128px 128px 64px);
  margin-left: -128px;
  margin-top: -64px;
}

이제 왼쪽 상단의 위치가 정렬되지만 오른쪽 하단은 여전히 ​​남아 있으므로 하나의 위쪽 요소에 머리의 크기를 지정합니다.

.box {
  height: 64px;
  width: 64px;
}

요약

여기까지 쓴 것을 근거로 실제로 256px의 머리를 표시하는 소스를 써 본다.

<span class="box">
  <img src="http://skins.minecraft.net/MinecraftSkins/yuta0801.png">
</span>

.box {
   display: inline-block;
   position: relative;
   width: 64px;
   height: 64px;
}
.box img {
  width: 512px;
  image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  position: absolute;
  clip: rect(64px 128px 128px 64px);
  margin-left: -64px;
  margin-top: -64px;
}

참고 기사

CSS에서만 이미지를 자르기(자르기)하는 방법

프로그래밍 방식으로 Minecraft 스킨에서 머리만 추출하는 방법

【CSS】도트 그림을 확대 표시해도 노망하지 않게 하는 방법