css - calc() 是否适用于 CSS 中图像的背景大小？

Question

我的问题很简单，calc() 是否适用于纯 CSS 中背景图像的背景大小...

现在我正在为响应式移动 View 修复背景图片...我希望图像保持固定的屏幕比例，但在任何移动屏幕上调整大小...

我实现了这个代码，它目前不工作:

@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)

我在这里问过类似的问题:Why is CSS calc(100%-250px) not working?

来自 MDN 文档:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

Source: MDN

W3C Documentation