2014-12-28 8 views
1

맨 아래에서 배경 repeat-y를 시작할 수 있습니까?css : 아래쪽에서 repeat-y를 채우기 시작합니다.

은 내가 무슨 여기에 오버랩 DIV 를 사용하여 별을 강조해야합니다 http://jsfiddle.net/ghKb2/43/

또는 여기에 코드 :

<html> 
<head> 
<style type="text/css"> 
.ratings { 
font-size:11px; 
line-height:1.25; 
margin:2px 0 0; 
} 

.rating-box { 
width:14px; 
height:65px; 
font-size:0; 
line-height:0; 
background:url("https://incinqueterre.com/images/bkg_rating_vertical.gif") 0 0 repeat-y; 
text-indent:-999em; 
overflow:hidden; 
} 

.rating-box .rating { 
height:65px; 
background:url("https://incinqueterre.com/images/bkg_rating_vertical.gif") 100% 0 repeat-y; 
} 

.ratings .rating-box { 
margin-right:7px; 
display: table-cell; 
vertical-align: bottom; 
} 
</style> 
</head> 

<body> 
<div class="ratings"> 
<div class="rating-box"> 
<div class="rating" style="height:85%" title="4.3/5"></div> 
</div> 
</div> 
</body> 

답변

1

단지에서 측면 .rating의 라인을 변경 :

background:url("https://incinqueterre.com/images/bkg_rating_vertical.gif") 100% 0 repeat-y; 

받는 사람 :

background:url("https://incinqueterre.com/images/bkg_rating_vertical.gif") 100% 100% repeat-y; 

아니면 내가 (더 쇼 의도) 더 읽을 생각 :

background:url("https://incinqueterre.com/images/bkg_rating_vertical.gif") right bottom repeat-y; 

작품, 바이올린 : http://jsfiddle.net/ghKb2/45/

관련 문제