Nhiều nền CSS

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

Bạn cũng sẽ tìm hiểu về các thuộc tính sau:

background-size
background-origin
background-clip

Nhiều nền CSS

CSS cho phép bạn thêm nhiều hình nền cho một phần tử, thông qua thuộc background-imagetính.

Các hình nền khác nhau được phân tách bằng dấu phẩy và các hình ảnh được xếp chồng lên nhau, nơi hình ảnh đầu tiên gần với người xem nhất.

Ví dụ sau có hai hình nền, hình ảnh đầu tiên là một bông hoa (căn chỉnh ở phía dưới và bên phải) và hình ảnh thứ hai là nền giấy (căn chỉnh ở góc trên bên trái):

Thí dụ

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

Nhiều hình nền có thể được chỉ định bằng cách sử dụng thuộc tính nền riêng lẻ (như trên) hoặc thuộc tính backgroundtốc ký.

Ví dụ sau sử dụng thuộc tính backgroundtốc ký (kết quả tương tự như ví dụ trên):

Thí dụ

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

Kích thước nền CSS

Thuộc tính CSS background-sizecho phép bạn chỉ định kích thước của hình nền.

Kích thước có thể được chỉ định theo độ dài, tỷ lệ phần trăm hoặc bằng cách sử dụng một trong hai từ khóa: chứa hoặc che.

Ví dụ sau đây thay đổi kích thước hình nền thành nhỏ hơn nhiều so với hình ảnh gốc (sử dụng pixel):

Cảm ơn Ngài vì Đau đớn

Nỗi đau chính là tình yêu

Đó là lý do tại sao điều đó xảy ra một cách nhỏ nhặt nhất, những người mà hoạt động bình thường của chúng ta phải gánh chịu để tận dụng những hậu quả

Đây là mã:

Thí dụ

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

Hai giá trị có thể có khác background-sizelà contain và cover.

Từ containkhóa chia tỷ lệ hình nền càng lớn càng tốt (nhưng cả chiều rộng và chiều cao của hình ảnh phải vừa với vùng nội dung). Như vậy, tùy thuộc vào tỷ lệ của ảnh nền và khu vực định vị nền, có thể có một số vùng nền không bị ảnh nền che phủ.

Từ coverkhóa chia tỷ lệ ảnh nền để vùng nội dung được bao phủ hoàn toàn bởi ảnh nền (cả chiều rộng và chiều cao của nó đều bằng hoặc vượt quá vùng nội dung). Do đó, một số phần của hình nền có thể không hiển thị trong khu vực định vị nền.

Ví dụ sau minh họa việc sử dụng containvà cover:

Thí 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;
}

Xác định kích thước của nhiều hình nền

Thuộc background-sizetính cũng chấp nhận nhiều giá trị cho kích thước nền (sử dụng danh sách được phân tách bằng dấu phẩy), khi làm việc với nhiều nền.

Ví dụ sau có ba hình nền được chỉ định, với giá trị kích thước nền khác nhau cho mỗi hình ảnh:

Thí dụ

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

Hình nền kích thước đầy đủ

Bây giờ chúng tôi muốn có một hình nền trên một trang web luôn luôn bao phủ toàn bộ cửa sổ trình duyệt.

Các yêu cầu như sau:

Tô toàn bộ trang với hình ảnh (không có khoảng trắng)
Chia tỷ lệ hình ảnh khi cần thiết
Hình ảnh trung tâm trên trang
Không gây ra thanh cuộn

Ví dụ sau đây cho thấy làm thế nào để làm điều đó; Sử dụng phần tử <html> (phần tử <html> luôn ít nhất bằng chiều cao của cửa sổ trình duyệt). Sau đó, thiết lập một nền cố định và chính giữa trên đó. Sau đó, điều chỉnh kích thước của nó bằng thuộc tính background-size:

Thí dụ

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

Hình ảnh anh hùng

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 hình ảnh anh hùng (hình ảnh lớn có văn bản) và đặt nó ở nơi bạn muốn.

Thí dụ

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

Thuộc tính background-origin CSS

Thuộc tính CSS background-originchỉ định vị trí của hình nền.

Thuộc tính có ba giá trị khác nhau:

hộp viền - hình nền bắt đầu từ góc trên bên trái của đường viền
padding-box - (mặc định) hình nền bắt đầu từ góc trên bên trái của cạnh padding
hộp nội dung - hình nền bắt đầu từ góc trên bên trái của nội dung

Ví dụ sau minh họa thuộc background-origintính:

Thí dụ

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

Thuộc tính nền-clip CSS

Thuộc tính CSS background-clipchỉ định vùng sơn của nền.

Thuộc tính có ba giá trị khác nhau:

hộp viền - (mặc định) nền được sơn đến mép ngoài của đường viền
padding-box - nền được sơn đến mép ngoài của đệm
hộp nội dung - nền được sơn bên trong hộp nội dung

Ví dụ sau minh họa thuộc background-cliptính:

Thí dụ

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

Thuộc tính nền nâng cao CSS

Property	Description
background	A shorthand property for setting all the background properties in one declaration
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

❮ Trước Kế tiếp ❯

Hướng dẫn CSS

CSS nâng cao

CSS đáp ứng

Lưới CSS

CSS SASS

Ví dụ về CSS

Tham chiếu CSS

Nhiều nền CSS