【问题标题】: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可以吗?

【问题讨论】:

标签: css background calc


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-01
    • 1970-01-01
    • 2019-08-18
    • 1970-01-01
    • 2023-04-04
    • 1970-01-01
    相关资源
    最近更新 更多