Latar Belakang CSS
- Hal Sebelumnya Pembuatan CSS
- Hal Berikutnya Teks CSS
CSS memungkinkan menerapkan warna bersih sebagai latar belakang, juga memungkinkan untuk menggunakan imej latar belakang untuk menciptakan efek yang cukup kompleks.
Kemampuan CSS di bidang ini jauh di atas HTML.
Warna latar
Dapat digunakan Atribut background-colorAtur warna latar untuk elemen. Atribut ini menerima nilai warna yang sah.
Peraturan ini mengatur latar belakang elemen menjadi abu-abu:
p {background-color: gray;}
Jika Anda ingin warna latar dari teks elemen ekor ke luar sedikit, tambahkan beberapa margin dalam:
p {background-color: gray; padding: 20px;}
Bisa diset untuk semua elemen warna latar, termasuk body hingga elemen dalam baris seperti em dan a.
background-color tidak dapat diserahkan, nilai baku adalah transparent. Transparent berarti 'transparan'. Artinya, jika elemen tidak disediakan warna latar, latar belakangnya akan jadi transparan, sehingga latar belakang elemen neneknya dapat terlihat.
imej latar belakang
Untuk memasukkan imej ke latar belakang, perlu digunakan Properti background-image.Nilai lalai properti background-image adalah none, yang berarti tidak ada gambar yang ditempatkan di latar belakang.
Jika perlu untuk menetapkan gambar latar belakang, mesti menetapkan nilai URL untuk properti ini:
body {background-image: url(/i/eg_bg_04.gif);}
Sebagian besar latar belakang diterapkan ke elemen body, tetapi bukan hanya demikian.
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);}
Anda bahkan boleh menetapkan gambar latar belakang untuk elemen teks dalam, seperti contoh di bawah ini yang menetapkan gambar latar belakang untuk pautan:
a.radio {background-image: url(/i/eg_bg_07.gif);}
Teoritisnya, boleh memasang gambar latar belakang untuk elemen penggantian seperti textareas dan select, tetapi bukan semua penggunaan agensi dapat menangani situasi ini dengan baik.
Selain itu, background-image juga tidak dapat diwarisi. Faktanya, semua properti latar belakang tidak dapat diwarisi.
Pengulangan latar belakang
Jika perlu untuk mengukir gambar latar belakang di halaman, boleh menggunakan Properti background-repeat.
Nilai properti repeat menyebabkan gambar di arah horizontal dan vertical untuk diukir seperti halnya praktek umum gambar latar belakang. repeat-x dan repeat-y masing-masing menyebabkan gambar hanya diukir di arah horizontal atau vertical, sementara no-repeat tidak mengizinkan gambar untuk diukir di mana pun.
Secara lalai, 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;
}
Pem定位 latar belakang
Boleh digunakan Properti background-positionUbah lokasi gambar di latar belakang.
Contoh di bawah ini menempatkan gambar latar di tengah elemen body:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position: center;
}
Ada banyak cara untuk memberikan nilai kepada properti background-position. Pertama, boleh menggunakan beberapa kata kunci: top, bottom, left, right dan center. Biasanya, kata-kunci ini akan muncul dalam pasangan, tetapi tidak selalu demikian. Juga boleh menggunakan nilai panjang, seperti 100px atau 5cm, akhirnya boleh menggunakan nilai peratusan. Beberapa jenis nilai untuk letak gambar latar berbeda sedikit.
kata kunci
kata kunci penempatan gambar paling mudah untuk memahami, fungsinya seperti yang diindikasikan namanya. Contohnya, top right menempatkan gambar di kanan atas area marjin elemen.
menurut spesifikasi, kata kunci lokasi dapat muncul dalam urutan apapun, selama memastikan tidak melebihi dua kata kunci - satu untuk arah horizontal, yang lain untuk arah vertikal.
jika hanya muncul satu kata kunci, dianggap bahwa kata kunci lain adalah 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 lokasi yang setara:
| kata kunci tunggal | kata kunci yang setara |
|---|---|
| tengah | tengah tengah |
| atas | atas tengah atau tengah atas |
| bawah | bawah tengah atau tengah bawah |
| kanan | kanan tengah atau tengah kanan |
| kiri | kiri tengah atau tengah kiri |
nilai persen
ekspresi nilai persen lebih kompleks. Jika Anda ingin menempatkan gambar di tengah elemen dengan nilai persen, ini sangat mudah:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
ini akan menyebabkan gambar ditempatkan dengan benar, pusatnya sejajar dengan pusat elemen.secara lain, nilai persen digunakan untuk elemen dan gambar.artinya, titik yang dijelaskan dalam gambar 50% 50% (tengah) akan sejajar dengan titik yang dijelaskan 50% 50% (tengah) di elemen.
jika gambar berada di 0% 0%, kiri atasnya akan berada di kiri atas area marjin elemen. Jika posisi gambar adalah 100% 100%, akan membuat bagian kanan bawah gambar berada di kanan bawah marjin.
jika Anda ingin menempatkan gambar di arah horizontal 2/3 dan arah vertikal 1/3, 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.
default nilai background-position adalah 0% 0%, dalam fungsi setara dengan top left. Ini menjelaskan mengapa gambar latar belakang selalu mulai mengebor dari kiri atas area marjin elemen, kecuali Anda menetapkan nilai lokasi yang berbeda.
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
CSS 背景实例
- 设置背景颜色
- 本例演示如何为元素设置背景颜色。
- 设置文本的背景颜色
- 本例颜色如何设置部分文本的背景颜色。
- 将图像设置为背景
- 本例演示如何将图像设置为背景。
- 将图像设置为背景 2
- 本例演示如何为多个元素同时设置背景图像。
- 如何重复背景图像
- 本例演示如何重复背景图像。
- 如何在垂直方向重复背景图像
- 本例演示如何垂直地重复背景图像。
- 如何在水平方向重复背景图像
- 本例演示如何水平地重复背景图像。
- 如何仅显示一次背景图像
- 本例演示如何仅显示一次背景图像。
- 如何放置背景图像
- 本例演示如何在页面上放置背景图像。
- 如何使用%来定位背景图像
- 本例演示如何使用百分比来在页面上定位背景图像。
- 如何使用像素来定位背景图像
- 本例演示如何使用像素来在页面上定位背景图像。
- 如何设置固定的背景图像
- 本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
- 所有背景属性在一个声明之中
- Contoh ini menunjukkan bagaimana untuk menggunakan atribut singkat untuk menetapkan semua atribut latar belakang dalam pernyataan satu.
Atribut Latar Belakang CSS
| Atribut | Deskripsi |
|---|---|
| background | Atribut singkat, berfungsi untuk menetapkan atribut latar belakang dalam pernyataan satu. |
| background-attachment | Apakah gambar latar belakang tetap atau bergerak bersama dengan bagian lain dari halaman. |
| background-color | Tetapkan warna latar belakang elemen. |
| background-image | Gunakan gambar sebagai latar belakang. |
| background-position | Tetapkan lokasi awal gambar latar belakang. |
| background-repeat | Tetapkan apakah gambar latar belakang digunakan dan bagaimana ia diulang. |
- Hal Sebelumnya Pembuatan CSS
- Hal Berikutnya Teks CSS
