2011-08-31 8 views
11

Bir excel elektronik tablosu gibi görünen bir arka plan oluşturmak istiyorum. Beyaz masa hücreleri, her hücre etrafındaki ince sınırlar. Bunu tek bir görüntü ile kolayca nasıl yapabileceğimi biliyorum ve bunu tablolar ile nasıl yapacağımı biliyorum ... ama bunu mümkünse yapmak istiyorum.Görüntü veya tablo olmadan CSS'de ızgara benzeri bir arka plan oluşturmak mümkün mü?

Her bir hücrenin boyutu 20x20 olarak düzeltilecektir, bu nedenle yeniden boyutlandırma hakkında endişelenmenize gerek yok. Düşüncesi olan var mı? Bir çeşit iç biçimlendirmeyi içeren bir şekilde pişirilmiş bir şekilde yaptım, ama bunun bir masa kullanmak kadar kötü olduğunu düşündüm.

Bu arka planın amacı, kullanıcıların bir ızgara üzerinde bloklar düzenlemesine izin verecek. JQuery UI'nin sürükle ve bırak işlevselliğini kullanarak, kullanıcının kapalı bir ızgara içinde blokları hareket ettirmesini istiyorum. Kılavuz çizgileri, ızgarada blokların nereye bağlı olduğunu gösterir. Bu kılavuzun yakalanmasının bir örneği (kılavuz çizgileri olmadan) http://jqueryui.com/demos/draggable/#snap-to

+4

bu hücreler sekmeli veri tutan edilecektir .. Bir tablo kullanmak gerekir .. bir görüntüyü kullanması gereken bir arka plan için kesinlikle ise. – Loktar

+4

Arka planın amacı nedir? Bu hücrelerin içine veri koyabilecek misin? Tablo verileri için tabloları kullanmak doğru sayılır. –

+1

Bir css gradyanı ve birden fazla arka plan ile yapabilirsiniz, ancak tarayıcı desteği şaşırtıcı değil, bir görüntü burada gerçekten en iyi bahistir. –

cevap

13

Bir arka plan resmi kullanın; zamanınızı işaretleme ile boşa harcamayın. Sen bundan daha verimli olsun gitmiyoruz:

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

Example.

+0

Güzel olan, en azından hata ayıklama için. Teşekkürler! – FelipeAls

+0

Harika görünüyor, ancak kare boyutunu nasıl tanımlayacağınız (bir parametreyle) veya başka bir renk seçebiliyorsunuz? Teşekkürler! –

+3

@RuiMarques: Başka bir resim yap. Sizin için veri URI'leri oluşturan [araçlar] (http://dopiaza.org/tools/datauri/) vardır. – josh3736

28

Bu sorun için de aramış ve ben bir very good solution bulundu:

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

, ızgara boyutunu değiştirmek background-boyutu ve yükselmede, son px seçeneği değiştirin. Izgara genişliği değiştirmek için degradedeki ilk px seçeneğini değiştirin. İlk eğim yatay, ikincisi dikey çizgiler içindir.

position: absolute 

gerekliydi:

bu demo için bunu css seçeneği tanıdı. Şimdi kılavuzumu oluşturacağım ve daha fazla bilgi alırsam bunları bir yorum olarak ekleyeceğim.

Umut bu yardımcı olur :)

+0

Aradım bunun için çok uzun. Teşekkür ederim. – Diskilla

+0

selam adam! mükemmelliği! – Suresh

İlgili konular