Open david2tdw opened 4 years ago
Rate评分中,半颗星实现,通过em来实现一半的宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>覆盖一半元素</title> <style> div { position: relative; font-size: 60px; /* 设定父元素的font-size属性 */ } .star { display: block; width: 60px; height: 60px; background: #353131; } .half { position: absolute; top: 0; left: 0; background: #ff1e86; width: 0.5em; /* 宽度设定为0.5em */ height: 60px; /* 高度设定为同父元素font-size相同 */ overflow: hidden; } </style> </head> <body> <div> <i class="star"></i> <i class="half"></i> </div> </body> </html>
em的宽度是相对于父元素font-size的值来计算的。
Rate评分中的星是通过icon-font来实现的,这时如果要遮挡一半就要通过em来实现此效果。
Rate评分中,半颗星实现,通过em来实现一半的宽度。
em的宽度是相对于父元素font-size的值来计算的。