我想创建一个看起来像 Excel 电子表格的背景。白色表格单元格，每个单元格周围有细边框。我知道如何使用单个图像轻松地执行此操作，并且我知道如何使用表格执行此操作......但如果可能的话，我想在没有任何一个的情况下执行此操作。
每个单元格的大小将固定为 20x20，因此我不必担心调整大小。有什么想法吗？我想出了一种涉及大量内部标记的方法，但我认为这几乎和使用表格一样糟糕。
该背景的目的是允许用户在网格上排列块。使用 jQuery UI 的拖放功能，我希望用户能够在有限的网格内移动块。网格线只会向他们显示其块在网格中绑定的位置。此网格捕捉（没有网格线）的示例位于http://jqueryui.com/demos/draggable/#snap-to http://jqueryui.com/demos/draggable/#snap-to
我也搜索过这个问题，我发现了一个非常好的解决方案 http://jsfiddle.net/2kmUg/1/:
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 选项。
要更改网格宽度，请更改渐变中的第一个 px 选项。
第一个渐变是水平的，第二个渐变是垂直线的。
对于这个演示，我认识到 css 选项：
position: absolute
被要求。我现在将建立我的网格，如果我获得更多信息，我将在评论中添加它们。
希望这可以帮助 ：）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
