Css màu nền

Điều đầu tiên bạn nên biết là có nhiều loại màu HTML khác nhau, chẳng hạn như mã màu Hex, tên màu HTML, giá trị RGB và RGBa, màu HSL, v.v. Để chọn màu ưa thích của bạn, hãy sử dụng Công cụ màu của chúng tôi

Trong đoạn mã này, bạn có thể tìm thấy nhiều cách khác nhau để thêm màu nền. Hãy bắt đầu từ cái dễ nhất

Thêm thuộc tính style vào phần tử

Bạn có thể đặt màu nền cho tài liệu HTML bằng cách thêm style="background-color. " đến phần tử

  
    Title of the document
  
  
    Some heading
    
Some paragraph for example.
  

Kết quả

Một số tiêu đề

Đoạn nào đó chẳng hạn

Thêm thuộc tính màu nền CSS vào phần tử

Thuộc tính background-color dùng để thay đổi màu nền. Chèn nó vào phần tử, bạn sẽ có một trang bìa đầy màu sắc

  
    Title of the document 
    
  
  

Bạn cũng có thể thêm màu nền cho các thành phần cụ thể trong tài liệu của mình. Ví dụ: hãy xem cách thay đổi màu của tiêu đề và đoạn văn

  
    Title of the document
    
  
  
    
Some heading with green background.
    
Some paragraph with blue background.

  


  

Hãy xem một ví dụ khác, nơi chúng ta thêm màu nền với giá trị tên màu vào

, HSL cho

và giá trị RGBa cho phần tử

  
    Title of the document
    
  
  
    Example
    
Some heading with green background.
    
Some paragraph with blue background.
    Some paragraph for
  

Nền chuyển màu cho phép bạn tạo hiệu ứng chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định

Có hai loại hình nền gradient. linear-gradient và radial-gradient

Trong nền có độ dốc tuyến tính, bạn có thể đặt điểm bắt đầu cho các màu. Nếu bạn không đề cập đến điểm bắt đầu, nó sẽ tự động đặt "từ trên xuống dưới" theo mặc định

Ví dụ đã cho hiển thị một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu từ màu xanh lam, chuyển sang màu xanh lá cây. Thay đổi nó theo yêu cầu của bạn

Trong nền gradient xuyên tâm, điểm bắt đầu được xác định bởi tâm của nó

Bạn cũng có thể điều chỉnh tỷ lệ phần trăm màu của mình như thế này. [màu1 30%, màu2 50%, màu3 20%]

Bạn có thể tạo nền sẽ thay đổi màu sắc của nó trong thời gian đã đề cập. Đối với điều đó, hãy thêm thuộc tính hoạt ảnh vào phần tử. Sử dụng quy tắc @keyframes để đặt màu nền mà bạn sẽ lướt qua, cũng như khoảng thời gian mỗi màu sẽ xuất hiện trên trang

Thuộc tính màu nền trong CSS được sử dụng để chỉ định màu nền của phần tử. Nền bao phủ toàn bộ kích thước của phần tử với phần đệm và đường viền nhưng không bao gồm lề. Nó làm cho văn bản dễ đọc cho người dùng.  

cú pháp

element {
    background-color property
}

Giá trị mặc định. Nó có một giá trị mặc định i. minh bạch

Giá trị tài sản

màu. Nó xác định giá trị màu nền hoặc mã màu. Ví dụ. Một tên màu có thể được đưa ra như. “green” hoặc giá trị HEX là “#5570f0” hoặc giá trị RGB là “rgb[25, 255, 2]”

Hướng dẫn CSS này giải thích cách sử dụng thuộc tính CSS được gọi là thuộc tính màu nền với cú pháp và ví dụ

Sự miêu tả

Thuộc tính màu nền CSS xác định màu nền của phần tử

cú pháp

Cú pháp cho thuộc tính CSS màu nền là

background-color: value;

Tham số hoặc Đối số

Màu nền của phần tử. Nó có thể là một trong những điều sau đây

ValueDescrip#RRGGGBH thể hiện màu nền theo hệ thập lục phân
div { background-color. #FF0000; . rgb[255,0,0]; . đỏ, xanh dương, đen, trắng]
div { background-color: rgb[255,0,0]; }color nameName of the background color [ie: red, blue, black, white]
div { background-color. màu đỏ; .
Giá trị mặc định cho màu nền CSS là trong suốt.
div { màu nền. trong suốt; . thừa kế;
div { background-color: inherit; }

Ghi chú

• Giá trị trong thuộc tính màu nền CSS có thể được biểu thị dưới dạng giá trị thập lục phân, giá trị rgb hoặc dưới dạng màu được đặt tên
• Các giá trị màu nền có thể được biểu thị bằng các giá trị thập lục phân như #FFFFFF, #000000 và #FF0000
• Các giá trị màu nền có thể được biểu thị bằng cách sử dụng rgb chẳng hạn như rgb[255,255,255], rgb[0,0,0] và rgb[255,0,0]
• Các giá trị màu nền có thể được thể hiện dưới dạng các màu được đặt tên như trắng, đen và đỏ
• Cần chuyển đổi giá trị màu của bạn sang một đại diện khác?

tính tương thích của trình duyệt web

Thuộc tính màu nền CSS có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Android
• Firefox [Tắc kè]
• Firefox Di động [Tắc kè]
• Internet Explorer [IE]
• điện thoại IE
• Ô-pê-ra
• Opera di động
• Safari [WebKit]
• Safari di động

Ví dụ

Chúng ta sẽ thảo luận về thuộc tính màu nền bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS

Sử dụng hệ thập lục phân

Hãy xem ví dụ về màu nền CSS nơi chúng tôi đã cung cấp giá trị thập lục phân cho màu

div { background-color: #FFFFFF; }

In this CSS background-color example, we have provided a hexadecimal value of #FFFFFF which would display the background color as white for the

div { background-color: rgb[255,255,255]; }