Mengatur latar belakang

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

Latar belakang CSS

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 saat Anda menggulir halaman. Biasanya, Anda memerlukan foto statis yang tidak mengikuti guliran karena menutupi halaman:

backgroundAttachment: fixed

Anda dapat memeriksa dokumen MDN untuk informasi yang lebih mendalam

Menganimasikan latar belakang

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

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 opacity CSS, 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.

Latar Belakang Lanjutan

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

Latar Belakang Elemen Gambar - Menetapkan filter pada gambar latar belakang

Klik Latar belakang lanjutan dan pilih imageElement. Ini akan membuat elemen HTML terpisah <div><img /></div> 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 yang lebih mendalam.

Latar Belakang Animasi

Klik Latar belakang lanjutan dan pilih animated.

Ada berbagai preset latar belakang animasi yang dapat Anda pilih.

Biasanya Anda dapat mengonfigurasi backgroundColor backgroundImage dari latar belakang animasi. Beberapa preset juga memiliki variabel css yang memungkinkan Anda mengonfigurasi warna, jarak, atau durasi animasi.

Latar Belakang Pola yang Dapat Diulang

Klik Latar belakang lanjutan dan pilih pattern.

1. Pilih jenis pola
2. Kemudian Anda dapat menyesuaikan opsi pola. Dan Anda dapat mencoba mengklik tombol Inspire me untuk melihat pola acak yang diberikan kepada Anda.

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.

Latar Belakang Video YouTube

Klik Latar belakang lanjutan dan pilih youtubeElement. 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 menyediakan 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.