Работает ли calc() для размера фона изображения в CSS?

Question

Мой вопрос очень прост, не calc() работать для размера фона фонового изображения в чистом CSS...

Прямо сейчас я исправляю фоновое изображение для адаптивного мобильного просмотра... Я хочу, чтобы изображение оставалось фиксированным по отношению к экрану, но изменяло размер на любом мобильном экране...

Я реализовал этот код, он не работает в настоящее время:

@media (max-width: 767px) { 
   body { 
      background-size: calc(100%-200px) auto; 
      background-repeat: repeat; 
   }    
}

Возможно ли это в чистом CSS?

Answer 1

Да, это работает везде, где вы могли бы поставить числа с такими единицами измерения, как%, em, rem, px, cm, vh и т. Д.

Я столкнулся с этим также: вы должны поставить пробел до и после -:

calc(100% - 200px)

Я спросил здесь что-то похожее: почему не работает CSS calc(100%-250px)?

Из документов MDN:

Обратите внимание + а также - операторы всегда должны быть окружены пробелами. Операнд calc(50% -8px) например, будет проанализирован как процент, за которым следует отрицательная длина, недопустимое выражение, в то время как операнд calc(50% - 8px) это процент, за которым следует знак минус и длина. Еще больше, calc(8px + -50%) рассматривается как длина, за которой следуют знак плюс и отрицательный процент. * а также / операторы не требуют пробелов, но добавление их для согласованности разрешено и рекомендуется.

Источник: MDN

W3C Документация