3 tháng 9, 2019

Thuộc tính Background trong CSS

Background là phần nền của trang web hoặc của 1 phần tử html. Ở phiên bản CSS 1CSS 2 có 5 thuộc tính, đến phiên bản CSS 3 đã được bổ sung thêm 3 thuộc tính nữa.

1. Background-color

- Thuộc tính background-color được dùng để chỉ định màu nền cho một thẻ html
- Giá trị của thẻ này có thể là mã màu (Hex) hoặc tên màu (tên tiếng Anh)

Ví dụ: background-color: #000 hoặc background-color: black

2. Background-image

- Thuộc tính background-image được dùng để chỉ định ảnh nền cho một thẻ html.
- Cú pháp: background-image:url('đường dẫn đến hình ảnh')
- Đường dẫn đến hình ảnh có thể là đường dẫn tương đối hoặc tuyệt đối, nếu phần CSS được viết trong một file riêng thì đường dẫn tương đối sẽ được tính từ vị trí của file CSS này. 

Ví dụ
#div1{
          width: 1000px;
          height: 700px;
          background-image:url('./yui-hatano.jpg');
}
Trong phần div1 sẽ có ảnh nền là ảnh yui-hatano.jpg, rộng 1000px, cao 700px

3. Background-repeat

- Thuộc tính background-repeat được dùng để chỉ định ảnh nền lặp đi lặp lại, sử dụng kèm theo thuộc tính Background-image
- Giá trị của thuộc tính background-repeat gồm:
  • no-repeat: Không lặp lại
  • repeat-x: Lặp lại theo chiều ngang
  • repeat-y: Lặp lại theo chiều dọc
  • repeat: Lặp lại theo cả chiều ngang và dọc
  • inherit: Kế thừa thuộc tính của thẻ html cha
Ví dụ
#div1{
          width: 1000px;
          height: 700px;
          background-image:url('./yui-hatano.jpg');
          background-repeat: repeat-y;
}
Ảnh nền yui-hatano.jpg sẽ được lặp lại theo chiều dọc

4. Background-attachment

- Thuộc tính background-attachment được dùng để chỉ định ảnh nền được cố định hoặc cuộn theo nội dung, sử dụng kèm theo thuộc tính background-image
- Giá trị của thuộc tính background-image gồm: 
  • scroll: Ảnh nền sẽ cuộn theo thẻ html (thường là mặc định)
  • fixed: Ảnh nền sẽ được cố định
  • local: Ảnh nền sẽ cuộn theo nội dung
  • inherit: Kế thừa thuộc tính của thẻ html cha
Ví dụ:
body{
        background-image:url('./yui-hatano.jpg');
        background-attachment: scroll;
}
Ảnh của toàn trang web là ảnh yui-hatano.jpg, sẽ được cuộn theo nội dung trang.

5. Background-position

- Thuộc tính background-position được dùng để chỉ định vị trí ảnh nền hiển thị trong thẻ html, sử dụng kèm theo thuộc tính background-image
- Giá trị của thuộc tính background-image gồm: 
  • x y: Ảnh nền sẽ cách lề trái x px và cách lề trên là y px 
  • key key: Tương ứng với top, right, bottom, left, center
Ví dụ:
body{
        background-image:url('./yui-hatano.jpg');
        background-attachment: scroll;
        background-position: 100px 100px;
}
Ảnh nền toàn trang sẽ cách lề trái là 100 px, cách lề trên là 100 px

6. Background-size (CSS 3)

- Thuộc tính này có trong CSS 3, dùng để chỉ định kích thước ảnh nền, sử dụng kèm theo thuộc tính background-image
- Giá trị bao gồm:
  • width height: Chỉ định chiều rộng và chiều cao của ảnh nền (px)
  • contain: Hiển thị đủ kích thước ảnh 
  • cover: Hiển thị để chứa đủ nội dung

7. Background-origin (CSS 3)

- Thuộc tính này có trong CSS 3, sử dụng gần giống như background-size, cũng dùng để chỉ định vị trí của ảnh nền nhưng chỉ có 3 trường hợp đặc biệt chứ không sử dụng tọa độ cụ thể:

  • border-box: Ảnh nền được tính từ đường viền
  • padding-box: Ảnh nền được tính từ khoảng cách biên (mặc định)
  • content-box: Ảnh nền được tính từ chỗ chứa nội dung

8. Background-clip (CSS3)

- Thuộc tính này có trong CSS 3, sử dụng gần giống như background-origin, nhưng tính cả màu nền và cũng chỉ có 3 trường hợp cụ thể:
  • border-box: Ảnh nền được tính từ đường viền
  • padding-box: Ảnh nền được tính từ khoảng cách biên (mặc định)
  • content-box: Ảnh nền được tính từ chỗ chứa nội dung


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!