CSS：背景位置不同角偏移的困难

Question

我在使用多个背景制作按钮时遇到了一些麻烦。我知道我可以使用 :before 和 :after 但如果可能的话我想弄清楚这一点。

这是 Jsfiddle http://jsfiddle.net/syren/qerUT/1/

在那里，我展示了我最终希望它的样子。在那个，我用了

background-position: left top, 97% 90%;

只是为了展示我想要的样子。因为我希望它能够优雅地扩展以用于其他按钮和翻译，所以我想使用这个：

background-position: left top, right 5px bottom 5px;

但这不起作用。根据规范它应该，所以我不确定我做错了什么。有任何想法吗？谢谢！

Answer 1

我试过做同样的事情。不幸的是，目前还没有对right 5px bottom 5px 的真正支持。

我最终做的是拍摄我的图像，并在图像的右侧和底部添加透明像素，以使其进入我想要的位置。它不漂亮，但在任何支持多个背景图像的浏览器中都能完美运行。

有关每种浏览器支持哪些后台功能的完整列表，请访问Standardista CSS3 Background Properties page。在 background-position 下，它列出了 4-value offset 仅受 IE9+ 和 Opera 11+ 支持。这是一个真正的耻辱，因为这是一个不受全面支持的 CSS3 背景功能。