css - 砌体类型背景图像

Question

我正在为我正在开发的 ruby​​ on rails web 应用程序做一些研究，需要一些问题的帮助。

1. 是否可以使用砌体 jquery 类型插件将图像渲染/显示为网页的背景？

2. 如果第一个问题的答案是否定的，那么是否可以使用 css(3) 和 html(5) 手动渲染多个图像作为背景？

3. 最后，如果我可以使用 1、2 或任何其他方法来显示多个背景图像，我是否能够应用常规 css 代码来操作图像？

在此先感谢您的帮助。

Answer 1

使用 CSS3 是可能的。在最简单的情况下，这是一个如何实现它的示例：

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
} 

顺序从第一个（左侧）是顶层到最后一个（右侧）是底部背景层（如果你正在分层它们）。

编辑：为了对每个背景图像应用更复杂的样式，例如灰度，您需要将 CSS 分解为这种格式：

/* this is the master css block - the height and width here represent the total coverage for all child background images */
    .sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
       height: 300px;
       width: 480px;
       position: relative;

    }
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */
    .sample1 .sea {
       background: url(media/sea.png) repeat-x top left;
    }
    .sample1 .mermaid {
       background: url(media/mermaid.svg) repeat-x bottom left;
    }
    .sample1 .fish {
      background: url(media/fish.svg) no-repeat;
      height: 70px;
      width: 100px;
      left: 30px;
      top: 90px;
      position: absolute;
    }
    .sample1 .fishing {
      background: url(media/fishing.svg) no-repeat top right 10px;
    }