9-Patch PNG能以某种方式在浏览器上与CSS一起工作吗

Question

在开发android应用程序时，我刚刚发现了9-Patch PNG (somefile.9.png)，这项技术节省了大量的工作和文件，这让我非常惊讶。

有没有办法在常规浏览器上实现这项技术？(使用某种jQuery插件，或其他方式...)。如果它能和CSS一起工作--那将是一个很大的改进……

Answer 1

来自CSS3的border-image是最匹配的：

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

浏览器支持：http://caniuse.com/border-image

一个有用的生成器：http://border-image.com/

就jQuery而言，我是通过谷歌搜索"jquery 9 slice scaling"找到的

http://code.google.com/p/scale9grid/

(9切片缩放是something similar的Adobe Flash术语)

Answer 2

scale9grid插件生成多个DOM对象，并且仅在调整窗口大小或由JavaScript手动触发调整大小时拉伸。

你不能使用雪碧图，因为你不能重复图像的一部分。你必须切出图像的8个部分(4个角，4个边)，你必须有一个颜色，当拉伸时，将应用在图像的中心。

值得一提的是，每当您使用拉伸位图图像的技术时，都会有一个最小大小的。您只能将其拉伸超过最小值。这一最小值取决于切割出的零件。如果角是5x5像素。在最佳情况下，整个元素的最小像素为10x10。

Answer 3

我可以推荐我的解决方案。这是jQuery插件(缩小版)：http://donreptile.com/plugins/slices9.min.js，它支持精灵图像。http://donreptile.com/plugins/demo.html在这里是工作演示。我试着制作了最正确的9切片插件，它保持边角不变，水平边框缩放x，垂直边框缩放y，中间缩放x和y，它比边框背景效果好得多。