淘寶的星星評論一直備受關注,它讓網店的商品評價變得更加豐富多彩。實際上,這些星星評論之所以如此生動活潑,與CSS技術密不可分。
在淘寶的評論系統中,星星是通過CSS來實現。淘寶使用了一種技巧,將一組星星的評分轉化為一個寬度為定值的圖形區塊,而每個星星本身只是一個簡單的CSS元素。具體實現方法如下:
.tb-rate-star{ background:url(//img.alicdn.com/imgextra/i3/188130280/O1CN018rW8qT1TcTnkpQUjR_!!188130280.png); background-size:48px 15px } .tb-rate-star .tb-star{ display:inline-block; width:12px; height:12px; margin-left:3px; background-position:-11px -1px; background:url(//img.alicdn.com/imgextra/i3/188130280/O1CN018rW8qT1TcTnkpQUjR_!!188130280.png) } .tb-rate-star .tb-star-on{ background-position:-28px -1px; background:url(//img.alicdn.com/imgextra/i3/188130280/O1CN018rW8qT1TcTnkpQUjR_!!188130280.png) }
在上面的CSS代碼中,我們可以看到.tb-rate-star這個CSS類定義了星星的背景圖片,星星的大小以及它們之間的間距。.tb-rate-star .tb-star這個類定義了未選中狀態下的星星,而.tb-rate-star .tb-star-on則定義了選中狀態下的星星。
淘寶星星評論不僅僅是一種對商品評價的表達方式,更是一種視覺體驗。通過巧妙的CSS技術,淘寶成功地將文本與圖形融合了起來,給人留下了深刻的印象。
下一篇css淡化圖片顏色