Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Lengkap CSS
• Pengenalan CSS
• Basis Bahasa Syntax CSS
• Syntax Tingkat Lanjut CSS
• Pemilihan Pencabutan Turun dari CSS
• Pemilihan Pencabutan id CSS
• Pemilihan Pencabutan Class CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Kisi CSS

• Ringkasan Model Kisi CSS
• Marjin Dalam CSS
• Batas CSS
• Marjin Luar CSS
• Pertumpahan Marjin Luar CSS

Pem定位CSS

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Element CSS
• Pemilihan Pencabutan Kelompok CSS
• Pemilihan Pencabutan Class CSS Dalam Perincian
• Pemilihan Pencabutan ID CSS Dalam Perincian
• Pemilihan Pencabutan Attribut CSS Dalam Perincian
• Pemilihan Pencabutan Anak Turun CSS
• Pemilihan Pencabutan Anak Element CSS
• Pemilihan Pencabutan Saudara Kepada Kiri CSS

Kursus Pilihan

Rekomendasi Kursus:

• Boks Pencarian CodeW3C.com

CSS memungkinkan menerapkan warna asli sebagai latar belakang, juga memungkinkan untuk menggunakan gambar latar belakang untuk menciptakan efek yang cukup kompleks.

Kemampuan CSS di bidang ini jauh di atas HTML.

Warna latar belakang

Dapat digunakan Atribut background-colorSetel warna latar belakang untuk elemen. Atribut ini menerima setiap nilai warna yang sah.

Peraturan ini menetapkan latar belakang elemen menjadi abu-abu:

p {background-color: gray;}

Jika Anda ingin warna latar belakang menyebar ke luar teks elemen sedikit, tinggal tambahkan beberapa margin dalam:

p {background-color: gray; padding: 20px;}

Coba sendiri

Dapat diset untuk semua elemen warna latar belakang, termasuk body hingga elemen dalam baris seperti em dan a.

background-color tidak dapat diturunkan, nilai standarnya adalah transparent. Transparent berarti 'transparan'. Artinya, jika elemen tidak menentukan warna latar belakang, latar belakangnya akan menjadi transparan, sehingga latar belakang elemen induk dapat terlihat.

gambar latar belakang

Untuk memasukkan gambar ke latar belakang, perlu menggunakan Properti background-image.Nilai default properti background-image adalah none, yang berarti tidak ada gambar yang ditempatkan di latar belakang.

Jika perlu menetapkan gambar latar belakang, harus diset nilai URL untuk properti ini:

body {background-image: url(/i/eg_bg_04.gif);}

Sebagian besar latar belakang diterapkan ke elemen body, tetapi tidak hanya begitu.

Contoh di bawah ini menerapkan latar belakang untuk paragraf tanpa menerapkan latar belakang untuk bagian lain dokumen:

p.flower {background-image: url(/i/eg_bg_03.gif);}

bahkan dapat menetapkan gambar latar belakang untuk elemen teks, contoh di bawah ini adalah penempatan gambar latar belakang untuk tautan:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Coba sendiri

Teoritisnya, bahkan dapat menambahkan gambar latar belakang ke elemen penggantian seperti textareas dan select, tetapi bukan semua agen pengguna dapat menangani situasi ini dengan baik.

Selain itu, perlu ditambahkan bahwa background-image juga tidak dapat dipindahkan. Faktanya, semua properti latar belakang tidak dapat dipindahkan.

Pengulangan latar belakang

Jika perlu mengulang gambar latar belakang di halaman, dapat digunakan Properti background-repeat.

Nilai properti repeat menyebabkan gambar di tata letak horizontal dan vertikal seolah-olah praktek umum gambar latar belakang. repeat-x dan repeat-y masing-masing menyebabkan gambar hanya diulang di arah horizontal atau vertikal, sementara no-repeat tidak mengijinkan gambar untuk diulang di arah apapun.

Secara default, gambar latar belakang akan dimulai dari pojok kiri atas elemen. Lihat contoh di bawah ini:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Coba sendiri

Pemilihan posisi latar belakang

Dapat digunakan Properti background-positionMengubah posisi gambar di latar belakang.

Contoh di bawah ini menempatkan gambar latar belakang di tengah elemen body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Ada banyak metode untuk menentukan nilai properti background-position. Pada awalnya, dapat digunakan beberapa kata kunci: top, bottom, left, right dan center. Biasanya, kata kunci ini muncul dalam pasangan, tetapi tidak selalu seperti itu. Juga dapat digunakan nilai panjang, seperti 100px atau 5cm, dan akhirnya, dapat digunakan nilai persen. Tipe nilai yang berbeda memiliki perbedaan kecil dalam menempatkan gambar latar belakang.

kata kunci

kata kunci penempatan gambar paling mudah memahami, fungsi nya seperti yang diindikasikan oleh namanya. Contohnya, top right menempatkan gambar di pojok kanan atas area marjin elemen.

menurut standar, kata kunci posisi dapat muncul dalam urutan apapun, selama tidak melebihi dua kata kunci - satu untuk arah horizontal, yang lain untuk arah vertikal.

jika hanya muncul satu kata kunci, kata kunci lain dianggap center.

jika Anda ingin menempatkan gambar di tengah atas setiap paragraf, cukup menyatakan seperti ini:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

berikut adalah kata kunci posisi yang setara:

nilai persen

ekspresi nilai persen lebih kompleks. Jika Anda ingin menempatkan gambar di tengah elemen menggunakan nilai persen, ini sangat mudah:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

ini akan mengakibatkan gambar ditempatkan dengan benar, dengan pusatnya sejajar dengan pusat elemen.ini berarti, nilai persen digunakan secara bersamaan untuk elemen dan gambar.ini artinya, titik yang dijelaskan di gambar 50% 50% (tengah) akan sejajar dengan titik yang dijelaskan di elemen 50% 50% (tengah).

jika gambar berada di 0% 0%, pojok kiri atasnya akan berada di pojok kiri atas area marjin elemen. Jika posisi gambar adalah 100% 100%, akan menempatkan bagian kanan bawah gambar di pojok kanan bawah margin.

jika Anda ingin menempatkan gambar di titik 2/3 arah horizontal dan 1/3 arah vertikal, Anda dapat menyatakan seperti ini:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

jika hanya menyediakan nilai persen, nilai yang disediakan akan digunakan sebagai nilai horizontal, nilai vertikal dianggap 50%. Ini mirip dengan kata kunci.

nilai standar background-position adalah 0% 0%, yang berfungsi sama seperti top left. Ini menjelaskan mengapa gambar latar selalu mulai menapak di pojok kiri atas area marjin elemen, kecuali Anda mengatur nilai posisi yang berbeda.

Nilai panjang

Nilai panjang menjelaskan offset area marjin kiri atas elemen. Poin offset adalah kiri atas gambar.

Contoh, jika nilai diatur menjadi 50px 100px, kiri atas gambar akan berada di posisi kiri atas area marjin elemen dengan 50 pixel ke kanan dan 100 pixel ke bawah:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Perhatikan, ini berbeda dengan nilai persen, karena offset hanya dari salah satu titik kiri atas ke yang lain. Artinya, kiri atas gambar akan sejajar dengan titik yang ditentukan dalam deklarasi background-position.

Hubungan Latar Belakang

Jika dokumen cukup panjang, latar belakang gambar juga akan menggulir saat dokumen menggulir ke bawah. Saat dokumen menggulir melewati posisi gambar, gambar akan hilang.

Anda dapat melakukannya dengan Atribut background-attachmentMencegah gulingan seperti ini. Dengan properti ini, dapat menyatakan bahwa gambar relatif terhadap area tampilan adalah tetap (fixed), sehingga tidak terpengaruh oleh gulingan:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Coba sendiri

Nilai default atribut background-attachment adalah scroll, yang artinya, dalam kondisi standar, latar belakang akan menggulir bersama dengan dokumen.

Atribut Latar Belakang CSS

Alat Tangkap

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Tautan Pemilik