css - 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 文档：

注意：+and-运算符必须始终被空格包围。例如的操作数calc(50% -8px)将被解析为百分比后跟负长度、无效表达式，而 的操作数calc(50% - 8px)是百分比后跟减号和长度。更进一步，calc(8px + -50%)被视为一个长度，后跟一个加号和一个负百分比。*and/ 运算符不需要空格，但允许并建议添加空格以保持一致性。

来源：MDN

W3C 文档