是否可以在没有图像或表格的情况下在CSS中创建类似网格的背景?

时间:2011-08-31 18:13:26

标签: jquery html css

我想创建一个看起来像excel电子表格的背景。白色表格细胞,每个细胞周围的薄边框。我知道如何使用单个图像轻松完成此操作,并且我知道如何使用表格执行此操作...但如果可能的话,我希望在没有任何一个的情况下执行此操作。

每个单元格的大小将固定为20x20,因此我不必担心调整大小。有什么想法吗?我有一种方法,包括大量的内部标记,但我认为这几乎与使用表格一样糟糕。

此背景的目的是允许用户在网格上排列块。使用jQuery UI的拖放功能,我希望用户能够在受限制的网格中移动块。网格线只是简单地显示它们的块绑定到网格中的位置。 http://jqueryui.com/demos/draggable/#snap-to

提供了此网格捕捉(没有网格线)的示例

2 个答案:

答案 0 :(得分:28)

我也搜索了这个问题,我找到了very good solution

background-size: 40px 40px;    
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);

要更改网格大小,请更改渐变中的背景大小和最后一个px选项。 要更改网格宽度,请更改渐变中的第一个px选项。 第一个渐变是水平的,第二个是垂直线。

对于这个演示,我认识到了css选项:

position: absolute

是必需的。我现在将建立我的网格,如果我得到更多信息,我会在评论中添加它们。

希望这会有所帮助:)

答案 1 :(得分:13)

使用背景图片;不要浪费你的时间摆弄标记。你不会比这更有效率:

background:url(data:image/gif;base64,R0lGODlhFAAUAIAAAMDAwP///yH5BAEAAAEALAAAAAAUABQAAAImhI+pwe3vAJxQ0hssnnq/7jVgmJGfGaGiyoyh68GbjNGXTeEcGxQAOw==);

Example