在 HTML 和 Javascript 中添加网格线到背景，类似于 VisualStudios 网格答案

【问题标题】：adding gridlines to background in HTML and Javascript similar to VisualStudios grid在 HTML 和 Javascript 中添加网格线到背景，类似于 VisualStudios 网格
【发布时间】：2012-06-05 16:42:25
【问题描述】：

我实现了网格捕捉，但我想让浅灰色线条水平和垂直显示。我的理由是，我正在制作一个与 Visual Studios 的表单设计方面具有相似外观和感觉的设计应用程序。

我有一些全局变量，这样我就知道像素间距。我只想让它与 Javascript 一起工作。页面可以在 X 和 Y 方向上无限移动，所以我不能有静态长度。它需要是动态的。

到目前为止，它正在出现，但不确定是否有当前的方法来实现它。

    <hr style ="position:absolute;" width = "1" size = "500" />  
    <hr style ="position:absolute;" width = "500" size = "1" />

【问题讨论】：

标签： javascript html css forms gridlines

【解决方案1】：

如果你有现代浏览器，我喜欢这种方式：

body{
  background-size:15px 15px;
  background-position: 0 -5px;
}
body:hover{
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff 98%, #000000 100%); 
}

悬停，可能会很好，我认为您可以轻松添加第二个背景并添加更多 css 前缀。

编辑：更好

html{
  background-size:200px 200px,200px 200px;
  background-position: 0 0,0 0;
  color:#7a7a7a;
}
html:hover{
  background-image: -webkit-linear-gradient(top, transparent, transparent 199px, #000000 200px),-webkit-linear-gradient(left, transparent, transparent 199px, #000000 200px); 
}

【讨论】：

【解决方案2】：

您能否实现一个for() 循环，该循环将创建一个有限数量（由窗口宽度或任何您想要的）规则，每隔这么多像素创建一个新的水平规则元素。您可以使用 DHTML 来指定每个水平线的样式特征。

顺便说一句，如果你的网格不需要移动，试试 position:fixed。

希望这会有所帮助！

【讨论】：

我认为这可能会有所帮助。现在，我正在使用只是重复的一个。如果还是不行，我去看看能不能这样实现。