Một số ví dụ

Số lượng các ngôi sao bị lấp đầy thể hiện mức độ đánh giá của người đọc. Bạn có thể thấy trên ví dụ trên một số ngôi sao chỉ bị lấp 1/2 hoặc 1/4. Ta chỉ sử dụng 2 tấm ảnh sau: và

Ý tưởng

Tạo ra 3 thẻ div, trong đó có 1 thẻ cha chứa 2 thẻ con, thẻ cha này sẽ được đặt thuộc tính position:relative, 2 thẻ con còn lại được đặt position:absolute và background là 2 ảnh trên, điều chỉnh sao cho 2 thẻ con này nằm đè lên nhau, cuối cùng chỉ cần thay đổi thuộc tính width của thẻ con nằm trên mang background là ảnh ngôi sao lấp đầy.

Mã CSS

.classification {
  position: relative;
  width: 91px;
  height: 17px;
}
.classification .cover {
  position: absolute;
  background: transparent url(img/stars.png) top left no-repeat;
  top: 0px;
  left: 0px;
  width: 91px;
  height: 17px;
  z-index: 101;
}
.classification .progress {
  position: absolute;
  background: transparent url(img/stars_full.png) top left no-repeat;
  top: 0px;
  left: 0px;
  height: 17px;
  z-index: 102;
}

Mã HTML

<div class="classification">
  <div class="cover"></div>
  <div class="progress" style="width: 27%;"></div>
</div>

Bạn hãy thay đổi giá trị của thuộc tính width=27% sao cho phù hợp, và chạy để xem kết quả.

( Tham khảo từ joseairosa.com)