是否可以从底部开始后台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>
最佳答案
只需将 .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;
作品, fiddle :http://jsfiddle.net/ghKb2/45/
关于html - css: 从底部开始填充 repeat-y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27678070/