Someone can suggest how to implement a smooth transition through the transparency of an incomplete star. Now this transition is sharp, I want the last, fifth star to be 75% transparent at the 95% or 9.5 estimate, and the rest are ordinary. Depending on the assessment changed appearance. I think data-rating be stored in the data-rating Can someone tell me, or will it direct you to make it as simple as possible?

 .star-ratings-sprite { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x; font-size: 0; height: 21px; line-height: 0; overflow: hidden; text-indent: -999em; width: 110px; margin: 0 auto; } .star-ratings-sprite-rating { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x; background-position: 0 100%; float: left; height: 21px; display: block; } 
 <div class="star-ratings-sprite"> <span style="width:92%" class="star-ratings-sprite-rating"></span></div>

1 answer 1

You can use this as an option.

 .star-ratings-sprite { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x; font-size: 0; height: 21px; line-height: 0; overflow: hidden; text-indent: -999em; width: 110px; margin: 0 auto; position: relative; } .star-ratings-sprite-rating { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x; background-position: 0 100%; float: left; height: 21px; display: block; } .star-ratings-sprite-rating-o { float: left; height: 21px; display: block; opacity: 0.5; position: absolute; right: 0; background-color: white; } 
 <div class="star-ratings-sprite"> <span style="width:92%" class="star-ratings-sprite-rating"></span> <span style="width:20%" class="star-ratings-sprite-rating-o"></span> </div>