摘抄自我趣同伴的心得：
大家可以會遇到過要做滿意度用星級來評分的情況，類似這種![]()
![]()
實現的方法有很多，大家最初想到的可能是根據滿意度有多少種情況就切多少種圖，然後拼在一張圖裏面，通過控制圖片的位置來實現。
以下有一種方法實現起來會比較簡單，想法來自 MATT !! 我只是負責實現而已.... ![]()
![]()
![]()
在分享之前先給Matt 一點掌聲 ![]()
![]()
![]()
![]()
這個方法只需要切一張圖![]()
![]()
原理是：覆蓋！
最簡單的就是子元素覆蓋父元素。
具體要怎麼實現呢？
將父元素的背景設置爲空心的星星。![]()
![]()
再將子元素的背景設置爲實心的星星。![]()
![]()
根據子元素會覆蓋父元素的原理，而且會繼承父元素寬度的特點。
如果不設置子元素的寬度的話，那麼子元素會繼承父元素寬度，完全覆蓋父元素，那麼就只看到子元素的背景，那麼就是5顆實心的星星、。
如果要看到1顆或者是半顆實心的星星要怎麼處理？
只需要設置子元素的寬度就可以了。 只需要量取一顆和半顆星星的寬度，需要多少就相應增加就可以了。
廢話不多說，以下是代碼：
HTML 結構：
CSS：![]()
\
\
要控制星星的數目，只需要在子元素裏面加上 相對應的寬度就可以了。 是不是很方便？![]()
![]()
![]()
![]()
如果大家有更加簡便的方法，可以提出來，讓大家學習學習