Giới thiệu và hướng dẫn sử dụng thuộc tính background, background-color, background-image để cấu hình nền trong CSS

Màu nền của một trang web làm cho trang web thêm sinh động thêm hấp dẫn, nó có thể hiển thị màu sắc riêng cho một trang web. Thuộc tính

2 sẽ định màu nền, ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền

nền trong CSS

màu nền

3 là thuộc tính giúp định màu nền cho thành phần trên một trang web

  
    
    
  
  
    
Chào mừng các bạn đến với stdio
  

màu nền. #fd1b1f

hình nền

4 thuộc tính cấu hình nền của thành phần bằng hình ảnh

biểu tượng. png

Bối cảnh Lặp lại

5 làm cho ảnh có thể lặp lại theo chiều ngang hoặc chiều dọc khi ảnh nhỏ hơn kích thước của thành phần chứa nó.

5 có 4 giá trị

• 7. twisting theo trục Ox ( width)

• 0. loop to the Oy Oy ( vertical)

• 1. play both 2 dimensions, here is default value

• 2. không lặp lại

body {
  background-image: url(icon.png);
  background-repeat: repeat;
}

lặp nền

vị trí nền

3 quy định ảnh nền xuất hiện tính từ bất kỳ vị trí nào trong thành phần. Mặc định khi hình nền được chèn vào sẽ nằm bên trái/trên màn hình

3 sử dụng hai giá trị để biểu diễn trạng thái muốn đặt ảnh nền, có nhiều loại đơn vị có thể sử dụng như.

5,

6,

7, … hay các đơn vị quy đổi thành

8

Ví dụ

• 9

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  0

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  1

tệp đính kèm nền

body {
  background-image: url(icon.png);
  background-repeat: repeat;
}

2 thuộc tính sử dụng để cố định hình nền cho trang web.

body {
  background-image: url(icon.png);
  background-repeat: repeat;
}

2 có 2 giá trị

• cuộn. ảnh sẽ cuộn theo trang web
• đã sửa. ảnh cố định hay nói các ảnh khác này sẽ đứng yên

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  4. ảnh nền sẽ trôi (cuộn) theo trang, đây là giá trị mặc định

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  5. ảnh nền sẽ không trôi theo trang

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  6. ảnh nền sẽ trôi theo nội dung

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  7. trả lại các tính chất vốn có

• body {
    background-image: url(icon.png);
    background-repeat: repeat;
  }
  

  8. kế thừa tính chất của thành phần cha

Viết tắt các thuộc tính của nền

Do trên trang web có nhiều nội dung để viết nên có thể viết tắt để cấu hình nhiều tính chất chung 1 dòng, vừa tốt cho khả năng tổ chức, vừa mã gọn, thay vì viết tất cả thuộc tính cấu hình

2 như.

4,

5,

3,. could write as after