Backgrounds CSS3
CSS3 berisi beberapa sifat 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 mengikuti sifat CSS3 baru:
-
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.
| Property | ||||||
|---|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 12.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
12.0 | 9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 12.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 12.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Beberapa Backgrounds
CSS3 memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk elemen, melaluibackground-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 penonton.
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 » background properti steno. Contoh berikut menggunakan
background properti steno (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 » CSS3 Latar Belakang Ukuran
CSS3background-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: berisi 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 enim ad minim WISI veniam, Quis nostrud Exerci tasi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
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 enim ad minim WISI veniam, Quis nostrud Exerci tasi ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Contoh :
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Cobalah sendiri » 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 posisi 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 coverContoh :
#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
Thebackground-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 nilai background-ukuran yang berbeda 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 situs Web yang mencakup seluruh jendela browser setiap saat.Persyaratan adalah sebagai berikut:
- Isi seluruh halaman dengan gambar (tidak ada ruang putih)
- Gambar skala yang diperlukan
- Gambar pusat pada halaman
- Jangan menyebabkan scrollbar
Contoh :
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
}
Cobalah sendiri » CSS3 background-asal Properti
CSS3background-origin properti menentukan mana gambar latar belakang diposisikan. Properti mengambil tiga nilai yang berbeda:
- perbatasan-kotak - gambar latar belakang dimulai dari sudut kiri atas dari perbatasan
- padding-box - (default) gambar latar belakang mulai dari sudut kiri atas padding tepi
- konten-kotak - gambar latar belakang dimulai dari sudut kiri atas konten
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
CSS3background-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
- konten-kotak - latar belakang dicat dalam kotak konten
background-clip properti:Contoh :
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Cobalah sendiri »
0 komentar:
Posting Komentar