添加網格線到類似於VisualStudios網格的HTML和Javascript中的背景

我有一個網格管理單元實現，但是我想讓淺灰色的線條在水平和垂直方向都顯示出來。我的理由是，我正在製作一個與Visual Studios的表單設計方面具有相似外觀和感覺的Designing應用程序。添加網格線到類似於VisualStudios網格的HTML和Javascript中的背景

我有一些全局變量，所以我知道像素間距。我只想讓它與Javascript一起工作。頁面可以在X和Y方向上無限移動，所以我不能有一個靜態長度。它需要是動態的。

它到目前爲止，但不確定是否有目前的方式來實現這一點。

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

來源

2012-06-05 Fallenreaper

用作背景 – 2012-06-05 16:44:24

你可以實現一個for()環路，它會創建的規則（您想通過窗口寬度決定，或其他）數量有限，創建一個新的水平規則元素每隔多少個像素。您可以使用DHTML來指定每個水平規則的樣式特徵。

順便說一句，如果你的網格不需要移動嘗試位置：固定。

希望這會有所幫助！

來源

2012-06-05 16:54:26 Wagtail

我認爲它可以幫助圖像。現在，我正在使用一個剛剛重複的工作。如果這不起作用，我會看看是否有可能以這種方式實施。 – Fallenreaper

如果你有最新的瀏覽器，我很喜歡這種方式：

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); 
}

來源

2012-06-06 08:28:08

添加網格線到類似於VisualStudios網格的HTML和Javascript中的背景

回答

相關問題