Latest web development tutorials

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

# Example1 {
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

# Example1 {
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.

OperaSafariChromeFirefoxInternet Explorer

contoh 1

Ulang gambar latar belakang:

div
{
background: url (img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}

Coba »

OperaSafariChromeFirefoxInternet Explorer

contoh 2

Meregangkan gambar latar belakang untuk benar-benar mengisi area konten:

div
{
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.



OperaSafariChromeFirefoxInternet Explorer

contoh

Posisi gambar latar belakang di konten-kotak:

div
{
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.

OperaSafariChromeFirefoxInternet Explorer

contoh

Mengatur dua gambar latar belakang dalam elemen body:

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

# Example1 {
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