Backgrounds CSS3
CSS3 berisi beberapa properti latar belakang baru, yang memungkinkan kontrol yang lebih besar dari elemen latar belakang.
Dalam bab ini Anda akan belajar bagaimana menambahkan beberapa gambar latar belakang untuk satu elemen.
Anda juga akan belajar tentang sifat-sifat CSS3 baru berikut:
-
background-size -
background-origin -
background-clip
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Beberapa Backgrounds
CSS3 memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk elemen, melalui background-image properti.
Gambar latar belakang yang berbeda dipisahkan dengan koma, dan gambar ditumpuk di atas satu sama lain, di mana gambar pertama adalah yang paling dekat dengan penampil.
Contoh berikut memiliki dua gambar latar belakang, gambar pertama adalah bunga (selaras ke bawah dan kanan) dan gambar kedua adalah latar belakang kertas (disesuaikan dengan pojok kiri):
Contoh
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Cobalah sendiri " Beberapa gambar latar belakang dapat ditentukan baik menggunakan properti background individu (seperti di atas) atau background properti singkat.
Contoh berikut menggunakan background singkatan properti (hasil yang sama seperti contoh di atas):
Contoh
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Cobalah sendiri " Ukuran CSS3 Latar Belakang
CSS3 background-size properti memungkinkan Anda untuk menentukan ukuran gambar latar belakang.
Sebelum CSS3, ukuran gambar latar belakang adalah ukuran sebenarnya dari gambar. CSS3 memungkinkan kita untuk menggunakan kembali gambar latar belakang dalam konteks yang berbeda.
Ukuran bisa ditentukan dalam panjang, persentase, atau dengan menggunakan salah satu dari dua kata kunci: mengandung atau penutup.
Contoh berikut mengubah ukuran gambar latar belakang untuk jauh lebih kecil dari gambar asli (menggunakan piksel):
Asli gambar latar belakang:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
gambar latar belakang ukurannya:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Berikut adalah kode:
Contoh
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Cobalah sendiri " Dua kemungkinan nilai-nilai lain untuk background-size yang contain dan cover .
The contain kata kunci skala gambar latar belakang untuk menjadi sebesar mungkin (tapi baik lebar dan tinggi yang harus muat di dalam area konten). Dengan demikian, tergantung pada proporsi gambar latar belakang dan daerah positioning latar belakang, mungkin ada beberapa daerah latar belakang yang tidak tercakup oleh gambar latar belakang.
The cover kunci skala gambar latar belakang sehingga area konten benar-benar tertutup oleh gambar latar belakang (baik lebar dan tingginya sama dengan atau melebihi area konten). Dengan demikian, beberapa bagian dari gambar latar belakang mungkin tidak terlihat di daerah posisi latar belakang.
Contoh berikut menggambarkan penggunaan contain dan cover :
Contoh
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Cobalah sendiri " Tentukan ukuran Multiple Images Background
The background-size properti juga menerima beberapa nilai untuk ukuran latar belakang (menggunakan daftar dipisahkan koma), ketika bekerja dengan beberapa latar belakang.
Contoh berikut telah tiga gambar latar belakang tertentu, dengan berbagai background-size nilai untuk setiap gambar:
Contoh
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Cobalah sendiri " Full Size Background Image
Sekarang kita ingin memiliki gambar latar belakang pada sebuah website yang mencakup seluruh jendela browser setiap saat.
Persyaratan adalah sebagai berikut:
- Mengisi seluruh halaman dengan gambar (tidak ada ruang putih)
- image skala yang diperlukan
- image pusat di halaman
- Tidak menyebabkan scrollbar
Contoh berikut menunjukkan bagaimana melakukannya; Menggunakan elemen html (elemen html selalu setidaknya ketinggian jendela browser). Kemudian mengatur latar belakang tetap dan berpusat di atasnya. Kemudian menyesuaikan ukurannya dengan background-size properti:
Contoh
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Cobalah sendiri " CSS3 background-origin Properti
CSS3 background-origin properti menentukan mana gambar latar belakang diposisikan.
Properti mengambil tiga nilai yang berbeda:
- border-box - gambar latar belakang mulai dari sudut kiri atas perbatasan
- padding-box - (default) gambar latar belakang mulai dari sudut kiri atas tepi bantalan
- content-box - gambar latar belakang mulai dari sudut kiri atas konten
Contoh berikut menggambarkan background-origin properti:
Contoh
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Cobalah sendiri " CSS3 background-clip Properti
CSS3 background-clip properti menentukan daerah lukisan latar belakang.
Properti mengambil tiga nilai yang berbeda:
- border-box - (default) latar belakang dicat ke tepi luar perbatasan
- padding-box - latar belakang dicat ke tepi luar padding
- content-box - latar belakang dicat dalam kotak konten
Contoh berikut menggambarkan background-clip properti:
Contoh
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
CSS3 Latar Belakang Properti
| Milik | Deskripsi |
|---|---|
| background | Sebuah properti singkat untuk setting semua properti background dalam satu deklarasi |
| background-clip | Menentukan daerah lukisan latar belakang |
| background-image | Menentukan satu atau lebih gambar latar belakang untuk elemen |
| background-origin | Menentukan di mana gambar latar belakang (s) / diposisikan |
| background-size | Menentukan ukuran gambar latar belakang (s) |