0

Всем привет. Не первый раз натыкаюсь на такой артефакт, что у блоков с одинаковым классом, но разными фонами заданными через :nth-child(), не срабатывает background-size заданный непосредственно в самом классе. Почему так происходит?

.newKkmPlate
    width: calc(100% / 4)
    color: var(--color-white)
    background: var(--color-textColor)
    // Не работает
    background-size: cover
    &:nth-child(2)
        background: url('../images/newItemPlateBg_1.jpg')
        // Работает
        background-size: cover
    &:nth-child(4)
        background: url('../images/newItemPlateBg_2.jpg')
2
  • 1
    Потому что свойство background включает в себя и background-size тоже (справка). Когда вы используете background, вы затираете старое значение background-size
    – andreymal
    24 мая 2019 в 12:39
  • @andreymal Действительно, даже не подумал об этом. Можете оформить ответ, поставлю галочку. Спасибо
    – user298256
    24 мая 2019 в 12:41

1 ответ 1

0

Это, конечно же не артефакт. Посмотрите внимательней, вы задаёте фоновое изображение через свойство background, которое просто напросто перезаписывает background-size, указанный в базовом перечне правил для класса.

В таких случаях предпочтительней использовать непосредственно те свойства, которые вы хотите переопределить:

Попробуйте так:

.newKkmPlate
    width: calc(100% / 4)
    color: var(--color-white)
    background: var(--color-textColor)
    background-size: cover
    &:nth-child(2)
        background-image: url('../images/newItemPlateBg_1.jpg')
    &:nth-child(4)
        background-image: url('../images/newItemPlateBg_2.jpg')

Удачи!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.