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

Question

我想创建一个看起来像 Excel 电子表格的背景。白色表格单元格，每个单元格周围的细边框。我知道如何用一张图片轻松做到这一点，我也知道如何用表格做到这一点……但如果可能的话，我想在没有任何一个的情况下做到这一点。

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

此背景的目的是允许用户在网格上排列 block 。使用 jQuery UI 的拖放功能，我希望用户能够在受限网格内移动 block 。网格线会简单地向他们显示他们的 block 在网格中的位置。 http://jqueryui.com/demos/draggable/#snap-to 提供了此网格捕捉(没有网格线)的示例

Answer 1

我也搜索过这个问题，我找到了 very good solution :

background-size: 40px 40px;    
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);

body {
    background:#000;
    z-index:-5;
}

#lines {
    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);
    height:100%;
    width:100%;
    opacity:0.14;
    position:absolute;
    top:0;
    left:0;
    z-index:-4;
}

<div id="overlay"></div>
<div id="lines"></div>

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

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

position: absolute

是必需的。我现在将构建我的网格，如果我获得更多信息，我将在评论中添加它们。

希望这有帮助:)