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