latar belakang CSS3
latar belakang CSS3
CSS3 berisi beberapa properti latar belakang baru, memberikan elemen latar belakang kontrol yang lebih besar.
Dalam bab ini Anda akan belajar tentang latar belakang properti berikut:
- background-image
- background-size
- background-asal
- background-clip
Anda juga akan belajar bagaimana menggunakan beberapa gambar latar belakang.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
milik | |||||
---|---|---|---|---|---|
background-image (Dengan beberapa latar belakang) | 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-asal | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Properti background-image CSS3
CSS3 dapat menambahkan gambar latar belakang melalui properti background-image.
gambar latar belakang yang berbeda dan gambar dipisahkan dengan koma, semua gambar yang ditampilkan di bagian atas yang pertama.
contoh
background-image: url (img_flwr.gif), url (paper.gif);
background-position: bottom kanan, kiri atas;
background-repeat: no-repeat, ulangi;
}
Coba »
Anda dapat mengatur jumlah properti yang berbeda untuk gambar yang berbeda
contoh
background: url (img_flwr.gif) kanan bawah no-repeat, url (paper.gif) meninggalkan berulang atas;
}
Coba »
CSS3 properti background-size
background-size menentukan ukuran gambar latar belakang. CSS3 lalu, ukuran gambar latar belakang ditentukan oleh ukuran sebenarnya dari gambar.
CSS3 dapat menentukan gambar latar belakang, mari kita kembali menentukan ukuran gambar latar belakang dalam lingkungan yang berbeda. Anda dapat menentukan persentase atau pixel ukuran.
Anda menentukan ukuran relatif terhadap lebar dan tinggi dari ukuran induk elemen persentase.
contoh 1
Ulang gambar latar belakang:
{
background: url (img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
Coba »
contoh 2
Meregangkan gambar latar belakang untuk benar-benar mengisi area konten:
{
background: url (img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Coba »
atribut background-Asal CSS3
atribut background-Asal menentukan lokasi daerah gambar latar belakang.
konten-box, dapat ditempatkan di dalam padding-box, dan daerah perbatasan-kotak gambar latar belakang.
contoh
Posisi gambar latar belakang di konten-kotak:
{
background: url (img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-asal: konten-kotak;
}
Coba »
CSS3 beberapa gambar latar belakang | |
CSS3 memungkinkan Anda untuk elemen The menambahkan beberapa gambar latar belakang. |
contoh
Mengatur dua gambar latar belakang dalam elemen body:
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
Coba »
CSS3 properti background-clip
CSS3 The background-clip latar belakang properti dipotong untuk mulai menggambar dari lokasi yang ditentukan
contoh
border: 10px bertitik hitam;
padding: 35px;
background: yellow;
background-clip: konten-kotak;
}
Coba »
latar belakang properti baru
pesanan | deskripsi | CSS |
---|---|---|
background-clip | Ketentuan latar belakang area gambar. | 3 |
background-asal | Yang telah ditentukan latar belakang wilayah posisi gambar. | 3 |
background-size | Background image dari ukuran yang telah ditentukan. | 3 |