CSS background berbagai tingkatan

Dalam bab ini, Anda akan belajar cara menambahkan beberapa gambar latar belakang ke elemen.

Anda juga akan belajar tentang atribut berikut:

  • background-size
  • background-origin
  • background-clip

CSS background berbagai tingkatan

CSS memungkinkan Anda melalui background-image Atribut untuk menambahkan beberapa gambar latar belakang ke elemen.

Gambar latar belakang yang berbeda dipisahkan dengan koma, dan gambar akan dipotong satu sama lain, dengan gambar pertama yang paling dekat dengan penonton.

Contoh di bawah ini memiliki dua gambar latar belakang, gambar pertama adalah bunga (dijadikan dengan bawah dan kanan) dan gambar kedua adalah latar belakang kertas (dijadikan dengan kiri atas):

实例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Coba Sendiri

Gambar latar belakang berbagai tingkatan dapat digunakan melalui atribut latar belakang yang berbeda (seperti yang disebutkan di atas) atau background atribut singkat untuk menentukan.

Contoh di bawah ini menggunakan background Atribut singkat (hasilnya sama seperti contoh di atas):

实例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Coba Sendiri

Ukuran Latar Belakang CSS

CSS background-size Properti ini memungkinkan Anda menentukan ukuran gambar latar belakang.

ukuran gambar latar belakang dapat ditentukan melalui panjang, persen, atau dengan menggunakan salah satu kata kunci berikut:contain atau cover.

Contoh di bawah ini mengurangi ukuran gambar latar belakang menjadi sangat kecil dibandingkan dengan gambar asli (dengan menggunakan pixel):

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.

Ini adalah kode:

实例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Coba Sendiri

background-size dua nilai yang lainnya adalah contain dan cover.

contain kata kunci akan mengukur gambar latar belakang menjadi ukuran yang paling besar yang mungkin (tetapi lebar dan tingginya harus cocok dengan area konten). Ini dapat menyebabkan ada beberapa area latar belakang yang belum diawasi oleh gambar latar belakang, tergantung dari proporsi gambar latar belakang dan area lokasi latar belakang.

cover kata kunci akan mengukur gambar latar belakang untuk menutupi area konten penuh (lebar dan tingginya sama dengan atau lebih besar daripada area konten). Hal ini dapat menyebabkan bagian beberapa dari gambar latar belakang tidak terlihat di area lokasi latar belakang.

下面的例子展示了 contain dan cover Cara penggunaannya:

实例

#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;
}

Coba Sendiri

Mendefinisikan ukuran gambar latar belakang yang berbagai jenis

Pada pengolahan latar belakang berbagai jenis:background-size Properti ini dapat menerima beberapa nilai pengaturan ukuran latar belakang (dipisahkan dengan koma).

Contoh di bawah ini menentukan tiga gambar latar belakang, setiap gambar memiliki nilai background-size yang berbeda:

实例

#example1 {
  background: url(tree.png) kiri atas tak diulang, url(flower.gif) kanan bawah tak diulang,; 
  	url(paper.gif) kiri atas ulang;
  background-size: 50px, 130px, auto;
}

Coba Sendiri

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

  • 用图像填充整个页面（无空白）
  • 根据需要缩放图像
  • 在页面上居中图像
  • 不引发滚动条

下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

实例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Coba Sendiri

Hero Image

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

实例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Coba Sendiri

Properti background-origin CSS

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

  • border-box - 背景图片从边框的左上角开始
  • padding-box - 背景图像从内边距边缘的左上角开始（默认）
  • content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

实例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Coba Sendiri

Properti background-clip CSS

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

  • border-box - 背景绘制到边框的外部边缘（默认）
  • padding-box - 背景绘制到内边距的外边缘
  • content-box - 绘制背景到内容框中

下面的例子展示了 background-clip 属性：

实例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Coba Sendiri

Properti Latar Belakang Tingkat Lanjut CSS

Properti Deskripsi
background Properti singkat untuk mengatur semua properti latar belakang dalam satu pernyataan.
background-clip Tentukan area perecikan latar belakang.
background-image Tentukan satu atau beberapa gambar latar belakang untuk elemen.
background-origin Tentukan posisi gambar latar belakang.
background-size Tentukan ukuran gambar latar belakang.