이미지를 가상 요소로 크기를 조정하려면 어떻게해야합니까?

Question

나는 의사 요소로 몇 가지 트릭을하려고합니다.

나는 순위를 표시하고 있으며 이미지가있는 상자의 모퉁이에서 45도 기울어 져 우승자 위에 왕관을 보여주고 싶습니다. 하지만 이미지가 너무 크면 의사 요소에 추가되는 이미지의 크기를 조정할 수있는 방법이 있습니까?

나는에만이 div이 CSS로

<div class='box'></div> 

: http://jsfiddle.net/GEtds/

내가 height 및 width을 변경 시도하지만 효과 : 나는 JSFiddle에 대한 예제를 만들어

.box { 
    width: 50px; 
    height: 50px; 
    float: left; 
    border: 1px solid #000; 
    position:absolute; 
    top: 100px; 
    left: 100px; 
} 

.box::after{ 
    content: url(URL_OF_IMAGE); 
    position: absolute; 
    top: -10px;  
    right: -10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
} 

.

Answer 1

을합니다.

.box::after{ 
    content: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png); 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    width: 0.1em; 
    height: 0.1em; 
    -webkit-transform: translateY(-35px) rotate(45deg) scale(0.2); 
    -moz-transform: translateY(-35px) rotate(45deg) scale(0.2); 
} 

updated fiddle

Answer 2

당신은 당신이 의사 요소에 width 및 height을 설정하여 이미지의 크기를 제어 할 수있는 것 background-size: cover;이와 함께, background-image으로 이미지를 설정하여 그것을 할 수 있습니다. 의사 요소가 렌더링되도록하려면 content: "";을 추가해야합니다. 이미 한 단계 더 이동, 변환을 사용하고 있기 때문에

는 여기 jsFiddle

CSS를

.box::after { 
    display: block; 
    content: ""; 
    background-image: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png); 
    background-size: cover; 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    width: 40px; 
    height: 40px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
}