jQuery插件Background Layers多层背景

如果要给DIV实现多层背景，CSS是不可能实现的，jQuery插件Background Layers多层背景可给元素增加多层背景，实现原理就如PhotoShop中图层关系一样，使用示例如下：
background-layers
使用说明
需要使用jQuery库文件和Background Layers库文件

需要自定义CSS样式，如下：

  1. <style type="text/css">
  2. .outerBox { float: left; }
  3. .innerBox { font-weight: bold; font-size: 20px; }
  4. </style>

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="/includes/jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="/includes/jquery.background_layers.js"></script>

二，HTML部分(三个实例)

  1. <div class="outerBox" style="height: 100px; width: 100px;">Test 1</div>
  2. <div class="outerBox" style="height: 200px; width: 400px;">Test 2</div>
  3. <div class="outerBox" style="height: 50px; width: 100px;">Test 3</div>

background-layers-test1

三，Javascript部分(调用jQuery插件Background Layers)

  1. <script type="text/javascript">
  2. $(function(){
  3. $('.outerBox').add_layer("#679cc6");
  4. $('.outerBox').add_layer("url('/images/l.png') left repeat-y");
  5. $('.outerBox').add_layer("url('/images/r.png') right repeat-y");
  6. $('.outerBox').add_layer("url('/images/t.png') top repeat-x");
  7. $('.outerBox').add_layer("url('/images/b.png') bottom repeat-x");
  8. $('.outerBox').add_layer("url('/images/tl.png') top left no-repeat");
  9. $('.outerBox').add_layer("url('/images/tr.png') top right no-repeat");
  10. $('.outerBox').add_layer("url('/images/br.png') bottom right no-repeat");
  11. $('.outerBox').add_layer("url('/images/bl.png') bottom left no-repeat",
  12. {
  13. insideCss : {'padding':'10px'},
  14. insideClass: 'innerBox'
  15. });
  16. });
  17. </script>

从上面实例来看，需要定义各层的显示或纯色或图片，使用方法如同CSS里的background URL，使用非常简单，对于实现多层背景功能，jQuery插件Background Layers是一个不错的解决方案。

点我查看jQuery插件Background Layers多层背景在线演示