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
CSS3 Beberapa Backgrounds
CSS3 memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk elemen, melalui properti background-image.
Gambar latar belakang yang berbeda dipisahkan dengan koma, dan gambar ditumpuk di atas satu sama lain, di mana gambar pertama adalah yang paling dekat.
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):
.background {
background-image: url(bg.png), url(bg5.png);
background-position: left top, right bottom;
background-repeat: repeat, no-repeat;
}
Beberapa gambar latar belakang dapat ditentukan baik menggunakan properti background individu (seperti di atas) atau properti singkatan latar belakang.
Contoh berikut menggunakan properti singkatan latar belakang (hasil yang sama seperti contoh di atas):
.background {
background: url(bg.png)right bottom no-repeat, url(bg5.png)left top repeat;
}
CSS3 Latar Belakang Ukuran
The 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: berisi atau penutup.
Contoh berikut mengubah ukuran gambar latar belakang untuk jauh lebih kecil dari gambar asli (menggunakan piksel):
Asli gambar latar belakang:
.background {
background: url(bg5.png);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Dua nilai lain yang mungkin untuk background-size adalah kata kunci "contain" dan "cover".
"contain" keyword 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.
"cover" kata kunci skala gambar latar belakang sehingga area konten benar-benar tertutup oleh gambar latar belakang (baik lebar dan tinggi yang sama 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" kata kunci:
.background1 {
background: url(bg5.png);
background-size: contain;
background-repeat: no-repeat;
}
.background2 {
background: url(bg5.png);
background-size: cover;
background-repeat: no-repeat;
}
Tentukan Ukuran Multiple Images Background
Properti background-size 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:
#background {
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;
}
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 spasi)
- Gambar skala yang diperlukan
- Gambar pusat pada halaman
- Jangan menyebabkan scrollbar
Contoh berikut menunjukkan bagaimana melakukannya; Gunakan elemen html (elemen html selalu setidaknya ketinggian jendela browser). Kemudian mengatur latar belakang tetap dan berpusat di atasnya. Kemudian menyesuaikan ukurannya dengan properti background-size:
html {
background: url(bg5.png) no-repeat center center fixed;
background-size: cover;
}
CSS3 background-origin Properti
Properti CSS3 background-origin menentukan mana gambar latar belakang diposisikan.
Properti background-origin 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 padding tepi
- content-box - gambar latar belakang mulai dari sudut kiri atas konten
Contoh berikut menggambarkan properti background-origin:
.background {
border: 10px solid black;
padding: 35px;
background: url(bg5.png);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS3 background-clip Properti
Properti CSS3 background-clip menentukan daerah lukisan latar belakang.
Properti background-clip 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 properti background-clip:
.background {
border: 10px dotted black;
padding: 35px;
background: url(bg5.png);
background-clip: content-box;
}
0 komentar:
Posting Komentar