Mengatur Latar Belakang

Berikut adalah beberapa cara untuk mengatur latar belakang di slidde.co. Latar belakang CSS dapat diatur pada elemen apa pun di slidde.co

Latar Belakang Foto Statis

Ini adalah kasus penggunaan yang paling umum.

Warna cadangan ketika gambar latar belakang Anda sedang dimuat atau bagian dari gambar latar belakang Anda transparan:

backgroundColor: #000

URL gambar dapat diunggah menggunakan slidde.co. Anda juga dapat menggunakan gradien CSS di sini, dan slidde.co menyediakan beberapa preset gradien dengan cara tanpa kode:

backgroundImage: url("your_image_url")

Anda dapat menggunakan "cover" sebagian besar waktu untuk memastikan latar belakang Anda menutupi semua gambar:

backgroundSize: cover

Jika backgroundSize: "cover" menyembunyikan beberapa bagian penting dari gambar Anda, Anda dapat menyesuaikan posisinya:

backgroundPosition: 50% 10px

Jika gambar latar belakang Anda bukan pola yang dapat diulang, Anda dapat mengaturnya ke no-repeat:

backgroundRepeat: no-repeat

Mengontrol apakah gambar latar belakang bergerak ketika Anda menggulir halaman. Biasanya, Anda memerlukan foto statis yang tidak mengikuti guliran karena menutupi halaman:

backgroundAttachment: fixed

Anda dapat memeriksa dokumen MDN untuk informasi lebih mendalam

Mengatur Filter pada Gambar Latar Belakang

Ini berlaku untuk Page Slide Container. Anda dapat mengklik Latar belakang lanjutan dan memilih imageElement. Ini akan membuat elemen HTML <div><img /></div> terpisah di dalam kontainer sebagai elemen pertama.

Kemudian Anda dapat menerapkan properti CSS seperti filter padanya. Misalnya, berikut adalah 3 cara untuk menciptakan lebih banyak kontras antara gambar latar belakang dan teks latar depan untuk meningkatkan keterbacaan.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Periksa dokumen MDN untuk pengenalan lebih mendalam.

Pola Latar Belakang yang Dapat Diulang

Ini berlaku untuk Page Slide Container. Anda dapat mengklik Latar belakang lanjutan dan memilih pola.

1. Pilih jenis pola
2. Kemudian Anda dapat menyesuaikan opsi pola tersebut. Anda juga dapat mencoba mengklik tombol Inspire me untuk melihat pola acak yang dihasilkannya.

Ini akan membuat elemen HTML terpisah <div><svg width="100%" height="100%" .../></div> di dalamnya. Jadi, itu berarti Anda dapat menyesuaikan properti CSS-nya juga, seperti opacity, filter, atau bahkan backgroundImage untuk menambahkan latar belakang gradasi ke elemen induk svg. Dan Anda juga dapat menganimasikan SVG tersebut.

Latar Belakang Video

Ini berlaku untuk Page Slide Container. Anda dapat mengklik Latar belakang lanjutan dan memilih YouTube. Ini akan membuat elemen HTML terpisah <div><iframe /></div> di dalamnya untuk menyematkan video YouTube. Anda dapat menempelkan tautan URL YouTube Anda di sana.

Saat ini hanya elemen YouTube yang diizinkan. Karena ini memberikan optimasi streaming yang lebih baik daripada menghosting video kita sendiri. Jika Anda memerlukan unggahan video khusus, silakan beri tahu kami melalui tombol umpan balik di navbar.

Menganimasikan Latar Belakang

Jika Anda menggunakan CSS backgroundImage, maka Anda dapat dengan mudah menganimasikan backgroundPosition-nya. Berikut adalah contoh.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Anda juga dapat menganimasikan properti CSS lainnya.

Namun, jika Anda perlu menganimasikan hal-hal seperti CSS opacity, Anda tidak dapat langsung menganimasikannya. Karena opacity berlaku untuk seluruh elemen. Anda harus menggunakan imageElement di Latar belakang lanjutan sebagai gantinya, dan atur target ke &>*:first-child untuk menerapkannya hanya pada elemen gambar.