Может ли 9-Patch PNG работать с CSS в браузерах?

Question

Я только что обнаружил 9-Patch PNG (somefile.9.png) во время работы над приложением для Android, и меня поразило количество работы и файлов, которые эта технология сохраняет.

Есть ли способ как-нибудь реализовать эту технологию в обычных браузерах? (используя какой-нибудь плагин jQuery или каким-то другим способом ...). если он будет работать с CSS - это может быть действительно большим улучшением ...

Answer 1

border-image из CSS3 наиболее близко соответствует:

• 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, я нашел это в Googling для "jquery 9 slice scaling" :

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

(9-фрагментное масштабирование - это термин Adobe Flash для что-то похожее )

Answer 2

Плагин scale9grid генерирует несколько объектов DOM и растягивается только при изменении размера окна или при ручном изменении размера с помощью JavaScript.

Вы не можете использоватьспрайт изображения, потому что вы не можете повторить часть изображения.Вы должны вырезать 8 частей изображения (4 угла, 4 стороны), и у вас должен быть цвет, который будет применяться в центре изображения при растяжении.

Следует отметить, что у вас есть минимальный размер всякий раз, когда вы используете методы растягивания растрового изображения.Вы можете только растянуть его больше, чем минимум.Этот минимум зависит от вырезанных частей.Если угол 5х5 пикселей.Минимум в лучшем сценарии будет 10x10 пикселей для всего элемента.

Answer 3

Я могу предложить мое решение. Это плагин jQuery (минимизированный): http://donreptile.com/plugins/slices9.min.js поддерживает спрайты изображений. http://donreptile.com/plugins/demo.html здесь работает демоверсия. Я попытался сделать наиболее правильный плагин с 9 слайсами, который не трогает углы, горизонтальные границы scale-x, вертикальные границы scale-y, а середина масштабируется по x и y. Это дает намного лучшие эффекты, чем фон границы.