css - 计算() 100% + #px

Question

我正在努力实现一些我什至不太确定在这里是否可行的事情。

我正在尝试在我的网站的导航下放置一个特定的投影 PNG 图像。但是，我也想将此功能重新用于站点上我希望的任何对象，无论是图像、div 还是按钮。基本上对任何对象使用相同的阴影图像。

使用 css3 calc() 函数，我试图将对象的高度设置为 @ 100% + 25px(png 的高度)。

我试过造型:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 

但是根据我在 Firebug 中收集到的信息，100% + 25px 是新的 100%，因为这没有任何效果。

我也试过:

height: -webkit-calc(100% + 25px); 
height:    -moz-calc(100% + 25px); 
height:      -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

但这里也没有快乐。

如果我使用 calc(3em + 25px);它工作没问题，但这不够灵活，无法处理任何对象。

这可能吗？我说得有道理吗？!

Answer 1

我不是 100% 确定，但 working draft描述计算两边的运算符形成一个子表达式(单一类型)。

由于您将相对值 (%) 与绝对值 (px) 相结合，因此可能无法完成计算。

更新:我做了一个小测试，它似乎工作得很好。您确定您在 html 中的选择器和位置正确吗？检查这个Fiddle .