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 等单位输入数字

我也运行：你必须在-之前和之后放一个space:

calc(100% - 200px)

我在这里问了类似的问题：

来自 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

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

Does calc() work for background size of image in CSS?

css

background

calc