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

Posted 2023-03-07

【中文标题】calc() 是不是适用于 CSS 中图像的背景大小？

【英文标题】：Does calc() work for background size of image in CSS?calc() 是否适用于 CSS 中图像的背景大小？

【发布时间】：2015-08-21 03:16:52

【问题描述】：

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

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

我实现了这段代码，它目前不工作：

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

纯CSS可以吗？

【问题讨论】：

Why doesn't the CSS calc() function work for me in IE9 and Safari? 的可能重复项

【参考方案1】：

是的，它确实适用于您可以使用 %、em、rem、px、cm、vh 等单位的数字。

我也遇到了这个问题：您必须在 - 之前和之后放置一个空格：

calc(100% - 200px)

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

来自 MDN 文档：

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

来源：MDN

W3C Documentation