CSS ile aşağıdaki etkiye ulaşmak istiyoruz:Yazı müthiş yüzde genişlik yığılmış simgesi
Bu yıldız simgesi bir yazı tipidir. Turuncu arkaplanın genişliğini yüzdelerle tanımlamak istiyorum, bu yüzden% 50'si yıldızın mükemmel yarısı olmalı.
<div class="container">
<span class="star star-under fa fa-star"></span>
<span class="star star-over fa fa-star"></span>
</div>
ve:
.container
{
font-size: 200px;
height: 300px;
position: relative;
width: 100%;
}
.star
{
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.star-under
{
color: #ddd;
}
.star-over
{
color: #f80;
overflow: hidden;
width: 30%;
}
Sorun genişliğinin% kullanmak için genişlik ve yükseklik sağlamak için ihtiyaç vardır Şimdilik
, aşağıdaki yaptı. Ve ben de, içeriğin genişliğini ve yüksekliğini atlarsam, hiçbir şey göstermez, çünkü kesinlikle konumlandırılmış çocuklar içerir.
Bu,% değeri sunucu tarafında hesaplanır, bu yüzden ziyade böyle satır içi tutardik:
<span class="star star-over fa fa-star" style="width: 62%;"></span>
Bunu yapmanın en esnek yolu nedir? En esnek olarak, herhangi bir genişlik veya yükseklik sağlamak için gerekli olanı kastediyorum.
https://jsfiddle.net/vco9r2rt/3/ müthiş, ama bu genişlik inline yapmak gerekir –
@Moogs - bu benim sunucu komut hesaplanır. Tabii CSS'yi HTML dosyama koyabilirdim, ama bundan kaçınmak isterim. –
https://jsfiddle.net/vco9r2rt/4/ –