자른 이미지를 다른 이미지 아래에 표시해야합니다.

Question

저는 줄에 5 개의 별표가 있으며, 2 개의 그림이 비어 있고 채워집니다. 비어있는 상태에서 CSS로 채워야합니다. 그래야 채우기 비율이 달라집니다. 그러나 나는 standart 작물 접근에 문제가있는 것처럼 보입니다. 아이디어를 제안 할 수 있습니까?

Answer 1

나는 두 개의 중첩 된 용기를 사용하여 다음과 같이 어떻게 든 그것을 할 것 :

#outer { 
    background: url('empty.png') top left repeat-x #666666; 
    position: relative; 
    height: 16px; /* set this to the height of the image */ 
    width: 80px; /* set this to a multiple of the image’s width */ 
} 

#inner { 
    background: url('filled.png') top left repeat-x #999900; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 16px; /* same as above */ 
} 

필요에 따라 인라인 CSS를 통해 내부 용기에 width 속성을 설정 :

style='width: 32px;' 
style='width: 64px;' 

(그것은 아무튼 ' 반드시 한 이미지의 너비의 배수 여야합니다.)

보너스 : 이미지에 투명도가 사용되지 않으면 CSS의 대체 배경색이 보완됩니다. 이미지가로드되지 않는 경우 백분율 막대입니다.