GIF'i ayarlama ' Grafik Değişim Formatı ” arka plan görüntüsü olarak tasarıma görsel olarak çekici bir öğe ekler. GIF, geliştiricilerin bir markanın görsel kimliğini oluşturmaya yardımcı olan bilgileri iletmesine veya bir ürün veya hizmeti vurgulamasına olanak tanır. Ancak geliştiriciler, GIF kullanımının web sayfasını boğmamasını veya kullanıcıyı ana içerikten uzaklaştırmamasını sağlamalıdır.

Bu makale, bir GIF'i web sayfasında arka plan resmi olarak ayarlama prosedürünü göstermektedir.

GIF Web Sayfasında Arka Plan Görüntüsü Olarak Nasıl Ayarlanır?

Bir GIF'i arka plan görüntüsü olarak ayarlamak, görsel öğeler ekleyerek göz alıcı öğeler oluşturmaya yardımcı olur.

GIF'ler, özellikle bir oyunbazlık veya kapris duygusu iletmek isteyen web sitelerinde veya belirli bir ürünü veya özelliği vurgulamak isteyen sayfalarda kullanışlıdır. Arka plan resmi olarak ayarlamak için aşağıdaki örnekleri ziyaret edin:

Örnek 1: GIF'i Sabit Arka Plan Olarak Ayarlama

Web sayfasının içeriğini oluşturmaya yardımcı olan HTML öğeleri “ ' etiket. Bu nedenle “ vücut ” öğesi ve üzerine CSS özellikleri uygulamak. “ öğesinin içerdiği tüm HTML öğelerini etkiler. ' etiket.

Örneğin, “

' Ve '

” etiketleri web sayfasının içeriği olarak kullanılmaktadır. Aşağıdaki kod parçasına bakın:

< vücut >
< h1 > GIF ayarı gibi Sayfadaki Arka Plan Resmi h1 >
< P > Bu GIF eklendi gibi kullanarak tüm sayfada bir arka plan resmi 'arka plan görüntüsü' Mülk. Bu Makale Linuxhint tarafından desteklenmektedir. P >
vücut >

Şimdi, 'içindeki' gövde 'HTML öğesini seçin. ” etiketi veya ayrı bir “ CSS ” dosyası, web sayfasında stil uygulamak için:

vücut {
arka plan resmi: url ( 'deniz.gif' ) ;
arka plan tekrarı: tekrar yok;
arka plan boyutu: kapak;
dolgu: 50 piksel;
yazı tipi boyutu: x-büyük;
Beyaz renk;
}

Yukarıdaki kod bloğunda:

• • İlk önce ' url() “ yolunu saklayan ” yöntemi kullanılır. GIF ' dosya. Ve bu metot CSS'ye bir değer olarak iletilir” arka plan görüntüsü ' mülk.
  • Ardından, “ tekrarsız ” CSS için bir değer olarak “ arka plan tekrarı GIF dosyasının tekrarı için ” özelliği.
  • Ardından, 'değerini ayarlayın. kapak ” CSS'ye “ arka plan boyutu ” tüm kullanılabilir alanı kapsayacak özellik
  • Bundan sonra, “ değerini sağlayın 50 piksel ' Ve ' x-büyük ” CSS'ye “ dolgu malzemesi ' Ve ' yazı Boyutu ” özellikleri sırasıyla. Bu, metnin etrafına boşluk ekler ve yazı tipi boyutunu büyütür.

Derlemeden sonra web sayfası şöyle görünür:

Yukarıdaki çıktı, web sayfasında arka plan olarak bir gif eklendiğini gösterir.

Örnek 2: GIF'i Kaydırılabilir Arka Plan Olarak Ayarlama

Başlangıçta, aşağıdaki gibi bir Web Sayfası içeriği oluşturmak için bir HTML yapısı oluşturun:

< div sınıf = 'içerir' >
< h1 > GIF ayarı gibi Sayfadaki Arka Plan Resmi h1 >
< P > Bu GIF eklendi gibi kullanarak tüm sayfada bir arka plan görüntüsü 'arka plan görüntüsü' Mülk. Bu Makale Linuxhint tarafından desteklenmektedir. P >
div >

< div >
< h3 stil = 'Beyaz renk;' > dışında yazılan içerik 'div' eleman h3 >
div >

Yukarıdaki kodda:

• • Birincisi, ebeveyn “
    ” etiketi, “ sınıfıyla birlikte kullanılır. içermek ”.
  • Sonra, ' h1 ' Ve ' P ” HTML öğeleri ve onlara sahte içerik sağlar.
  • Bundan sonra, başka bir '
    ” ve “

    Sahte veriler sağlayarak etiketleyin.

Şimdi, aşağıdaki CSS özelliklerini ekleyerek GIF'i web sayfasında arka plan olarak ekleyin:

.contai {
arka plan resmi: url ( deniz.gif ');
arka plan tekrarı: tekrar yok;
arka plan boyutu: kapak;
yükseklik: 100vh;
ekran: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
esnek yön: sütun;
Beyaz renk;
yazı tipi boyutu: büyük;
metin hizalama: merkez;
dolgu: 2rem;
}

Yukarıda kullanılan kod bloğunun açıklaması:

• • İlk olarak, “ görüntü yolu ”, “ tekrarsız t” ve “ kapak ” CSS için bir değer olarak “ arka plan görüntüsü ”, “ arka plan tekrarı ' Ve ' arka plan boyutu ” özellikleri sırasıyla.
  • Ardından, “ değerini ayarlayın 100vh ' Ve ' esnek ” CSS'ye “ yükseklik ' Ve ' görüntülemek ' özellikler.
  • Bundan sonra, CSS'yi kullanın ' renk ”, “ yazı Boyutu ”, “ Metin hizalama ' Ve ' dolgu malzemesi İçeriğe stil uygulamak için özellikler.

Derleme işleminin bitiminden sonra web sayfası şöyle görünür:

Çıktı, ' GIF ” tüm sayfaya arka plan resmi olarak eklenmiştir.

Çözüm

GIF'i web sayfasında arka plan resmi olarak ayarlamak için, CSS ' arka plan görüntüsü ”özellik HTML'de kullanılır” vücut ” öğesi. 'body' öğesine uygulanan CSS özelliği, içerdiği tüm öğelere otomatik olarak uygulanır. “ ayarlayarak 100vh ”, yükseklik özelliğine bir değer olarak, kaydırma efekti de etkinleştirilebilir. Arka plan gifinin kaydırma boyunca hareket etmesini sağlar. Bu makale, bir GIF'in web sayfasında arka plan resmi olarak nasıl ayarlanacağını göstermiştir.