Đặt nhiều ảnh làm hình nền cho element trong CSS - CSS Multiple Backgrounds

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    14 thg 11, 2022

  • Số lượt xem

    436 lượt xem


Trong CSS ta có thể đặt nhiều ảnh làm hình nền cho element trong CSS.

CSS Multiple Backgrounds

CSS cho phép bạn thêm nhiều hình nền cho một element, 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, 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 cùng bên trái):

#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 background shorthand.

Ví dụ sau sử dụng background shorthand (kết quả tương tự như ví dụ trên):

 

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

 

CSS Background Size

Thuộc tính background-size CSS cho phép bạn chỉ định kích thước của hình ả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: contain hoặc cover.

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.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

 

Hai giá trị có thể có khác cho background-sizecontaincover.

Từ khóa contain sẽ 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à vùng định vị nền, có thể có một số vùng nền không bị ảnh nền che phủ.

Từ khóa cover có tỷ lệ hình nền để 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á khu vực nội dung). Như vậy, một số phần của hình nền có thể không thể nhìn thấy trong khu vực định vị nền.

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

#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 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:

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

 

Full Size Background Image

Bây giờ chúng ta 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:

  • Bao phủ 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 ở giữa trang
  • Không tạo ra thanh cuộn

Ví dụ sau đây cho thấy làm thế nào để làm điều đó; Sử dụng element <html> (element <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:

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

 

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

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

 

CSS background-origin

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

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

  • border-box - 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 padding
  • content-box - 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 tính background-origin:

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

 

CSS background-clip

Thuộc tính CSS background-clip chỉ định vùng tô của nền.

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

  • border-box - (mặc định) nền được tô đến mép ngoài của đường viền
  • padding-box - nền được tô ra mép ngoài của phần padding
  • content-box - nền được sơn trong hộp nội dung

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

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

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.