Hình ảnh trong suốt css

Thiết lập màu nền cho phần tử dùng thuộc tính CSS background-color chỉ ra giá trị màu theo tên, hoặc theo mã hex, hoặc theo trộn rgb. Hãy xem phần màu sắc và thuộc tính color để biết tên các màu.

Chú ý là ngoài màu nền cho phần tử với thuộc tính background-color thì còn có thể thiết lập nhiều lớp nền là ảnh nền cho phần tử bằng thuộc tính background-image. Màu nền được vẽ sau ảnh nền (nếu có).

Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb(135,206,235)
Ví dụ về màu nền coral

Ví dụ về màu nền #41c04d

Ví dụ về màu nền rgb(135,206,235)

Ví dụ về màu nền coral

Chú ý màu nền được tô trong phạm vi (tô phần content, tô cả phần padding, hay cả phần border) được thiết lập thông qua thuộc tính

Ảnh nền với background-image

Thuộc tính background-image dùng để chỉ ra ảnh được dùng làm nền cho phần tử. Nó được vẽ trên màu nền của phần tử.

Cú pháp:

background-image: image | none

Trong đó:

Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang để tô kín kích thước phần tử.

Ví dụ bạn có url ảnh là: https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png

Dùng ảnh đó làm nền cho một phần tử div như ví dụ:

    
Ví dụ về ảnh nền với background-image
    
Phần tử được tô bởi background-color rồi đên background-image




    
Ví dụ về ảnh nền với background-image

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

Có thể thiết lập nhiều ảnh nền chồng lên nhau bằng cách liệt kê nhiều

background-image: image | none

0 cách nhau bởi dấu phảy

background-image: image | none

1

.nen {
    background-image: url(url-image1), url(url-image2);
}

Lặp lại ảnh nền: background-repeat

Mặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat bạn có thể điều khiển tính lặp lại này, bằng các giá trị

Cú pháp:

background-repeat: valuex valuey;

Trong đó: valuex và valuey là kiểu lặp lại theo chiều x và y có thể nhận

• background-image: image | none

  2 - lặp lại (ảnh có thể bị cắt tại biên của box)

• background-image: image | none

  3 - lặp lại - dàn ảnh có khoảng cách sao cho ảnh không bị cắt tại biên

• background-image: image | none

  4 - lặp lại - ảnh có thể bị thu phóng để không bị cắt tại biên

• background-image: image | none

  5 - không lặp lại

Ví dụ: ảnh lặp lại cả chiều x và y thì viết:

background-repeat: repeat repeat;

Ví dụ trên có thể viết ngắn gọn một giá trị

background-repeat: repeat;

Tương tự, có một số trường hợp viết ngắn ngọn bạn chỉ cần viết một giá trị bao gồm:

• background-image: image | none

  2 lặp lại theo x, y (tương đương

  background-image: image | none

  7)

• background-image: image | none

  8 chỉ lặp theo chiều x (tương đương

  background-image: image | none

  9)

• 
  
      
  Ví dụ về ảnh nền với background-image
      
  Phần tử được tô bởi background-color rồi đên background-image
      
  Ví dụ về ảnh nền với background-image
  
  
  
  
  

  0 chỉ lặp theo chiều y(tương đương

  
  
      
  Ví dụ về ảnh nền với background-image
      
  Phần tử được tô bởi background-color rồi đên background-image
      
  Ví dụ về ảnh nền với background-image
  

  1)

• background-image: image | none

  5 không lặp theo cả chiều x và y (tương đương

  
  
      
  Ví dụ về ảnh nền với background-image
      
  Phần tử được tô bởi background-color rồi đên background-image
      
  Ví dụ về ảnh nền với background-image
  

  3)

• background-image: image | none

  4 tương đương

  
  
      
  Ví dụ về ảnh nền với background-image
      
  Phần tử được tô bởi background-color rồi đên background-image
      
  Ví dụ về ảnh nền với background-image
  

  5

• background-image: image | none

  3 tương đương

  
  
      
  Ví dụ về ảnh nền với background-image
      
  Phần tử được tô bởi background-color rồi đên background-image
      
  Ví dụ về ảnh nền với background-image
  
  
  
  

  7

 


    
Ví dụ về ảnh nền với background-image
    
Phần tử được tô bởi background-color rồi đên background-image
    
Ví dụ về ảnh nền với background-image

Ví dụ về ảnh nền với background-image

Phần tử được tô bởi background-color rồi đên background-image

Ví dụ về ảnh nền với background-image

background-attachment

Thuộc tính

    
Ví dụ về ảnh nền với background-image
    
Phần tử được tô bởi background-color rồi đên background-image
    
Ví dụ về ảnh nền với background-image

8 để điều khiển xem ảnh nền là cố định trong phần tử hoặc cuộn theo trang. Với các giá trị như

    
Ví dụ về ảnh nền với background-image
    
Phần tử được tô bởi background-color rồi đên background-image
    
Ví dụ về ảnh nền với background-image

9 nền không cuộn theo phần tử (cố định với biên trang),

.nen {
    background-image: url(url-image1), url(url-image2);
}

0 trôi theo phần tử (nền cố định với biên phần tử),

.nen {
    background-image: url(url-image1), url(url-image2);
}

1 nền cuộn theo content của phần tử.