Question

是否可以从底部开始背景重复-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>

Answer 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/

css：从底部开始填充repeat-y

1 个答案: