CSS nền đa phần

Trong chương này, bạn sẽ học cách thêm nhiều hình ảnh nền vào một phần tử.

Bạn cũng sẽ học các thuộc tính sau:

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

CSS nền đa phần

CSS cho phép bạn thông qua background-image Thuộc tính này để thêm nhiều hình ảnh nền cho một phần tử.

Các hình ảnh nền khác nhau được phân cách bằng dấu phẩy, và chúng sẽ chồng lên nhau, trong đó hình ảnh đầu tiên gần người xem nhất.

Ví dụ dưới đây có hai hình ảnh nền, hình ảnh đầu tiên là bông hoa (đối齐 với đáy và bên phải), hình ảnh thứ hai là nền giấy (đối齐 với góc trên cùng bên trái):

ví dụ

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

Thử ngay

Hình ảnh nền đa phần có thể sử dụng thuộc tính nền riêng (như đã nêu) hoặc background Thuộc tính viết tắt để chỉ định.

Ví dụ dưới đây sử dụng background Thuộc tính viết tắt (kết quả giống với ví dụ trên):

ví dụ

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

Thử ngay

Kích thước nền CSS

CSS background-size Thuộc tính này cho phép bạn chỉ định kích thước hình ảnh nền.

hoặc có thể chỉ định kích thước hình ảnh nền bằng độ dài, phần trăm hoặc bằng một trong hai từ khóa sau:contain hoặc cover.

Ví dụ sau đây sẽ điều chỉnh kích thước hình ảnh nền nhỏ hơn nhiều so với hình ảnh gốc (dùng 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.

Đây là mã:

ví dụ

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

Thử ngay

background-size của hai giá trị có thể là contain và cover.

contain ký tự sẽ phóng to hình ảnh nền đến kích thước lớn nhất có thể (nhưng rộng và cao phải phù hợp với khu vực nội dung). Do đó, dựa trên tỷ lệ hình ảnh nền và khu vực định vị nền, có thể có một số khu vực nền không được hình ảnh nền bao phủ.

cover ký tự sẽ phóng to hình ảnh nền để toàn bộ khu vực nội dung được hình ảnh nền bao phủ (rộng và cao bằng hoặc lớn hơn khu vực nội dung). Do đó, một số phần của hình ảnh nền có thể không nhìn thấy trong khu vực định vị nền.

Dưới đây là ví dụ minh họa: contain và cover Cách sử dụng:

ví dụ

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

Thử ngay

Định nghĩa kích thước của nhiều hình ảnh nền

Khi xử lý nhiều nềnbackground-size Thuộc tính này cũng có thể chấp nhận nhiều giá trị cài đặt kích thước nền (danh sách phân隔 bằng dấu phẩy).

Ví dụ sau đây chỉ định ba hình ảnh nền, mỗi hình ảnh có giá trị background-size khác nhau:

ví dụ

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Thử ngay

Ảnh nền full size

Hiện tại, chúng tôi muốn ảnh nền trên trang web luôn trải qua toàn bộ cửa sổ trình duyệt.

Yêu cầu cụ thể như sau:

  • Lấp đầy toàn bộ trang bằng ảnh (không có khoảng trống)
  • Phóng to ảnh theo nhu cầu
  • Chèn ảnh giữa trang
  • Không tạo thanh cuộn

Dưới đây là cách thực hiện: Sử dụng yếu tố <html> (yếu tố <html> luôn là chiều cao ít nhất của cửa sổ trình duyệt). Sau đó đặt nền cố định và giữa. Cuối cùng, điều chỉnh kích thước bằng thuộc tính background-size:

ví dụ

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

Thử ngay

Hero Image

Bạn cũng có thể sử dụng các thuộc tính nền khác nhau trên <div> để tạo Hero Image (ảnh lớn có văn bản) và đặt nó ở vị trí bạn muốn.

ví dụ

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

Thử ngay

Thuộc tính background-origin CSS

CSS background-origin Thuộc tính xác định vị trí của ảnh nền.

Thuộc tính này chấp nhận ba giá trị khác nhau:

  • border-box - Ảnh nền bắt đầu từ góc trên cùng của viền
  • padding-box - Ảnh nền bắt đầu từ cạnh ngoài của lề trong (mặc định)
  • content-box - Ảnh nền bắt đầu từ góc trên cùng của nội dung

Dưới đây là ví dụ minh họa: background-origin Thuộc tính:

ví dụ

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

Thử ngay

Thuộc tính background-clip CSS

CSS background-clip Thuộc tính xác định khu vực vẽ nền.

Thuộc tính này chấp nhận ba giá trị khác nhau:

  • border-box - Vẽ nền đến cạnh ngoài của viền (mặc định)
  • padding-box - Vẽ nền đến cạnh ngoài của lề trong (mặc định)
  • content-box - Vẽ nền ở khung nội dung

Dưới đây là ví dụ minh họa: background-clip Thuộc tính:

ví dụ

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

Thử ngay

Thuộc tính nền CSS cao cấp

Thuộc tính Mô tả
background Thuộc tính viết tắt để thiết lập tất cả các thuộc tính nền trong một dòng.
background-clip Định nghĩa khu vực vẽ của nền.
background-image Đặt một hoặc nhiều ảnh nền cho một yếu tố.
background-origin Định nghĩa vị trí đặt ảnh nền.
background-size Định nghĩa kích thước của ảnh nền.