Arka Plan Stilleri - Webflow Yardım
Bir öğe için ayarlayabileceğiniz arka plan stillerine genel bir bakış: renk, resimler, gradyanlar, renk kaplamaları ve videolar.
Arka plan rengi
Resimler ve videolar hariç herhangi bir öğeye arka plan rengi ayarlayabilirsiniz (ancak arka plan olarak resim ve video kullanabilirsiniz). Bir renk değeri girerek (örneğin, hex, rgba veya renk adı) veya renk seçiciyi kullanarak arka plan rengi ekleyin. Ayrıca metin öğelerine veya bir metin öğesi içindeki belirli metin içeriğine arka plan rengi ekleyebilirsiniz.
Arka plan renklerinin siteniz genelinde tutarlı olmasını istiyorsanız, kalıtım için Gövde (Tüm sayfalar) etiketini kullanın. Bunu, Gövde öğesini seçip Stil panelinde etiketi seçerek veya kalıtım menüsünü kullanarak stilize edin. Gövde (Tüm sayfalar) üzerindeki herhangi bir değişiklik, yeni öğelere varsayılan olarak uygulanacaktır.
Çoğu öğe varsayılan olarak şeffaf bir arka plana sahiptir. Kaydırıcı bileşeni gibi bazı öğelerin varsayılan bir rengi vardır ve bunu geçersiz kılabilirsiniz.
Arka plan resmi
Webflow, arka plan resminizi özelleştirmek için birçok seçenek sunar.
Arka plan resmini eklemek veya değiştirmek için:
- Stil panelinde Arka Planlar bölümüne gidin
- Varlık panelinden Resim seçe tıklayın
- HiDPI cihazlarda daha keskin görüntüler için @2x kutusunu işaretleyin
Arka plan videosu ayarlamak için, Ekle panelindeki arka plan video bileşenini kullanın.
Arka plan resmi boyutu
- Özel: Genişlik/yükseklik veya yüzde değerleri ayarlayın. 100%'ün üzerindeki değerlerle daha büyük ölçeklendirin.
- Kapla: Arka planı doldurur ve kaplar, resmi kesebilir.
- İçer: Resmi öğe içinde tutar.
Arka plan resmi konumu
Varsayılan üst-sol. Konumları manuel olarak ayarlayabilirsiniz (px, %, VW, VH).
Döşeme
Arka plan resimleri varsayılan olarak hem dikey hem yatay tekrar eder. Yatay, dikey veya hiç tekrar etmeme kontrolü.
Sabit veya kaydır
Sabit değil (resim kayar) veya Sabit (resim yerinde kalır) seçin. Sabit resimler görüntü alanı tarafından tutulur.
Gradyanlar
Gradyanlar tek başına veya arka plan rengi/resmi üzerinde katmanlı olarak kullanılabilir. İki tür:
- Doğrusal gradyanlar
- Radyal gradyanlar
Her ikisi de renklerin solduğu duraklara (noktalar) sahiptir.
Doğrusal gradyan
Açıyı kadran, oklar (45 derece artışlarla) veya alan girişi ile ayarlayın.
Gradyan durakları
Duraklardaki renk/şeffaflığı düzenleyin. Görüntü üzerinde katmanlama, daha düşük şeffaflıkta görüntüyü görünür kılar. Tıklayarak durak ekleyin. Dışarı sürükleyerek kaldırın.
Tekrarla
Gradyanın tekrarlanması için geçişler.
Ters çevir
Durak pozisyonlarını tersine çevirmek için simge.
Radyal gradyan
Dairesel gradyan oluşturur. Sol durak merkezdeki renktir.
Pozisyon
Odak noktasını noktalarla veya değerler/birimlerle manuel olarak seçin.
Boyut
Ön ayar kontrolleri:
- En yakın kenar: merkezden en yakın kenara
- En yakın köşe: merkezden en yakın köşeye
- En uzak kenar: merkezden en uzak kenara
- En uzak köşe: (varsayılan)
Renk kaplaması
Renk seçici ve şeffaflık ile arka planlara renk kaplaması ekleyin.
Resim ve gradyan katmanlama
Etkili bir görünüm için birden fazla arka plan resmi, gradyan ve kaplamayı üst üste koyun. Sürükleyerek yeniden sıralayın, göz simgesiyle görünürlüğü değiştirin, çöp kutusuyla silin.
Arka plan videosu
Arka plan videoları, sinematik bir hava katmak için arka planlarda sessiz, döngüsel videolardır. Dikkat edin:
Hızlı bul (CMD/CTRL+E) veya Ekle paneli > Bileşenler ile ekleyin. Videonuzu yükleyin (<30MB; webm, mp4, mov, ogg). Dosya adlarında boşluk/özel karakterlerden kaçının.
Yüklemeden sonra tarayıcı desteği için (mp4 & webm) kod dönüştürme gerçekleşir.
Video ayarları
- Videoyu döngüye al: sürekli tekrar eder.
- Videoyu otomatik oynat: sayfa yüklendiğinde başlar.
- Oynat/duraklat düğmesi ekle: ziyaretçi oynatmayı kontrol edebilir.
Arka plan videosunu önizleme
- Küçük resmin üzerine gelin
- Yeni sekmede açın
- Çubuktaki önizleme simgesi
Arka plan videosunu değiştirme
Videoyu değiştirmek, kod dönüştürmek, önizlemek vb. için ayarları açın.
Arka plan videosunu bir bölüm olarak kullanma
Arka plan video öğesinin içine içerik bırakın. Stil panelinde her zamanki gibi stil verin.
Arka plan video örtüsü
Kontrast için bir gradyan veya düz örtü ekleyin. Örtü, videonun üstünde, içeriğin altında yer alır.
Ve işte Webflow'da arka plan kullanımı böyle!