html - css: 从底部开始填充 repeat-y

标签 html 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>

最佳答案

只需将 .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/

相关文章:

php - HTML 输入名称与数据库列名称的对应关系 : how to protect from possible attacks

javascript - 在局部 View 上设置拖放区的正确方法是什么?

html - 下拉导航菜单在 Internet Explorer 中不起作用

css - 样式表困惑

javascript - 如何选择当前元素的下一个元素

javascript - 如何更改输入框中特定字母的颜色?

javascript - 将 angularjs $scope 对象视为 html

javascript - jQuery根据下一个元素更改td的类

css - 垂直流体布局

带有两个输入元素的 IE 中的 CSS z-index 错误