CSS nhiều nền
Trong chương này, bạn sẽ tìm hiểu cách thêm nhiều hình nền vào một thành phần.
Bạn cũng sẽ tìm hiểu về các thuộc tính sau:
-
background-size -
background-origin -
background-clip
CSS nhiều nền
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 tính background-image .
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, trong đó hình ảnh đầu tiên ở gần người xem nhất.
Ví dụ sau có hai ảnh nền, ảnh đầu tiên là một bông hoa (căn chỉnh ở dưới cùng bên phải) và ảnh thứ hai là nền giấy (căn chỉnh ở góc trên bên trái):
Ví dụ
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Hãy tự mình thử » 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 tốc ký background .
Ví dụ sau sử dụng thuộc tính tốc ký background (kết quả tương tự như ví dụ trên):
Ví dụ
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Hãy tự mình thử » Kích thước nền CSS
Thuộc tính CSS background-size cho 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 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):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Với điều kiện tối thiểu là có thể thực hiện được, điều này sẽ không thể thực hiện được khi bạn bị lobortis lobortis và không có đủ tiền sau mỗi giao dịch.
Đây là mã:
Ví dụ
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Hãy tự mình thử » Hai giá trị có thể có khác cho background-size là contain và cover .
Từ khóa contain 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 nó phải vừa với khu vực nội dung). Như vậy, tùy theo tỷ lệ của ảnh nền và vùng định vị nền mà có thể có một số vùng nền không được ảnh nền che phủ.
Từ khóa cover chia tỷ lệ hình nền sao cho vùng nội dung được bao phủ hoàn toàn bởi hì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ị được trong vùng định vị nền.
Ví dụ sau minh họa việc sử dụng contain và cover :
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;
}
Hãy tự mình thử »Xác định kích thước của nhiều hình nền
Thuộc tính background-size 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:
Ví 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ãy tự mình thử »Hình nền kích thước đầy đủ
Bây giờ chúng tôi muốn có hình nền trên một trang web luôn bao phủ toàn bộ cửa sổ trình duyệt.
Các yêu cầu như sau:
- Lấp đầy toàn bộ trang bằng hình ảnh (không có khoảng trắng)
- Chia tỷ lệ hình ảnh theo yêu cầu
- Hình ảnh trung tâm trên trang
- Không gây ra thanh cuộn
Ví dụ sau đây cho thấy cách thực hiện; Sử dụng phần tử <html> (phần tử <html> luôn có chiều cao tối thiểu bằng cửa sổ trình duyệt). Sau đó đặ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 kích thước nền:
Ví dụ
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
} Hãy tự mình thử »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 chính (hình ảnh lớn có văn bản) và đặt nó ở nơi bạn muốn.
Ví dụ
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
} Hãy tự mình thử »Thuộc tính nguồn gốc nền CSS
Thuộc tính background-origin CSS chỉ định vị trí của hình nền.
Thuộc tính này nhận 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
- hộp đệm - (mặc định) hình nền bắt đầu từ góc trên bên trái của cạnh đệm
- 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-origin :
Ví dụ
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Hãy tự mình thử »Thuộc tính clip nền CSS
Thuộc tính CSS background-clip chỉ định vùng vẽ của nền.
Thuộc tính này nhận ba giá trị khác nhau:
- hộp viền - (mặc định) nền được vẽ ra mép ngoài của đường viền
- hộp đệm - nền được vẽ vào cạnh ngoài của phần đệm
- hộp nội dung - nền được vẽ trong hộp nội dung
Ví dụ sau minh họa thuộc tính background-clip :
Ví dụ
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Hãy tự mình thử » 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) |
