Arka plan tekrarı - CSS Hileleri

Anonim

Bir background-imageözellik belirtilirse, background-repeatCSS'deki özellik bunun tekrarlanıp tekrarlanmayacağını (ve nasıl) tanımlar. İşte bir örnek:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Bunlar, bu özellik için olası değerlerdir (olağan şeylerin yanı sıra inherit):

  • repeat: görüntüyü her iki yönde döşeyin. Bu varsayılan değerdir.
  • repeat-x: resmi yatay olarak döşeyin
  • repeat-y: görüntüyü dikey olarak döşeyin
  • no-repeat: döşeme yapmayın, resmi bir kez gösterin
  • space: görüntüyü her iki yönde döşeyin. Tek bir görüntü sığamayacak kadar büyük olmadığı sürece görüntüyü asla kırpmayın. Birden fazla görüntü sığabiliyorsa, her zaman kenarlara dokunan görüntüler arasında boşluk bırakın.
  • round: görüntüyü her iki yönde döşeyin. Tek bir görüntü sığamayacak kadar büyük olmadığı sürece görüntüyü asla kırpmayın. Artakalan boşluğa birden fazla görüntü sığabiliyorsa, bunları sıkıştırın veya alanı doldurmak için uzatın. Yarım görüntü genişliğinden daha azsa, uzatın, daha fazlaysa uzatın.

Ayrıca iki değer sözdizimi vardır:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Bu da tek değerli sözdizimlerini iki değerli sözdiziminin kısaltması yapar. Örneğin round, gerçekten round round.

Birden çok arka planla uğraşıyorsanız, birden çok değeri virgülle ayırabilirsiniz.

Demo

CodePen'de
CSS-Tricks (@ css-tricks) tarafından Kalem arka plan tekrarına
bakın.

Aşağıdakilere kıyasla nasıl spaceve roundçalıştığına dair etkileşimli demo repeat:


CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen The Different "arkaplan tekrarlarını"
görün.

"Sahte" kenarlık gösteren başka bir yeniden boyutlandırma demosu:

Kalem Bkz
Gömme Sınır Resmi işten konuşma Fuarı'nda (@shoptalkshow) tarafından basit yol
CodePen üzerinde.

İşte hamburgerlerin gösterildiği bir başka eğlenceli demo background-repeat: round;.

İlişkili

  • arka plan eki
  • arka plan klibi
  • arka plan rengi
  • arka plan görüntüsü
  • arkaplan kökenli
  • arka plan konumu
  • arkaplan boyutu

Kaynaklar

  • CSS3 Özellikleri
  • MDN

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Virgülle ayrılmış çoklu değer sözdizimi yalnızca Firefox 3.6+ ve IE 9+ sürümlerinde desteklenir. Ayrı yatay ve dikey değerleri kontrol etmek için iki değerli sözdizimi yalnızca Firefox 13+ ve IE 9+ sürümlerinde desteklenir. roundVe spaceanahtar kelimeler yalnızca Firefox 49+ ve IE 9+ vardır.