Нужно показать обрезанное изображение под другим изображением

Question

У меня 5 звезд на линии и 2 вида картинок пустых и заполненных. Мне нужно обрезать по заполненному CSS, под пустым, чтобы он выглядел как процент заполнения. Но, похоже, у меня проблемы со стандартным подходом к урожаю. Можете ли вы предложить идеи?

Answer 1

Я бы использовал два вложенных контейнера и сделал бы это как-то так:

#outer {
    background: url('empty.png') top left repeat-x #666666;
    position: relative;
    height: 16px;  /* set this to the height of the image */
    width: 80px;   /* set this to a multiple of the image’s width */
}

#inner {
    background: url('filled.png') top left repeat-x #999900;
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;  /* same as above */
}

Установите свойство width во внутреннем контейнере через встроенный CSS при необходимости:

style='width: 32px;'
style='width: 64px;'

(Это не обязательно должно быть кратно ширине одного изображения.)

Бонус: если ваши изображения не используют прозрачность, резервные цвета фона CSS будут компенсировать процентные полосы, еслиизображения не загружаются.