CSS 04 – Các thành phần trong CSS (P.2)

0
20

3. Nhóm thuộc tính phông nền trong CSS

a. Thuộc tính background-color

Dùng để thiết lập màu nền cho một phân vùng nhất định, giá trị của thuộc tính này là tên  màu bằng Tiếng Anh hoặc mã mãu.
Cú pháp :

Ví dụ :

See the Pen vp_css_bg_attr_examp by Thien (@anhtomks) on CodePen.0

b. Thuộc tính background-image

Dùng để thiết lập ảnh nền cho một phân vùng nào đó. Giá trị của thuộc tính này là đường dẫn ảnh.
Cú pháp:

Chú ý : Đối với những tên ảnh có khoảng trắng thì ta đặt giá trị đường dẫn ảnh vào cặp dấu “”
Ví dụ:

See the Pen vp_css_bg_image_examp by Thien (@anhtomks) on CodePen.0


Ví dụ này tôi đặt ảnh nền cho khối div có độ rộng là 300px và chiều cao là 300px. Ảnh nền đang bị lặp.

c. Thuộc tính background-repeat

Dùng để thiết lập việc lặp lại của ảnh nền. Giá trị của thuộc tính này gồm :
  Repeat-x: Lặp ảnh nền theo chiều ngang
  Repeat-y: Lặp ảnh nền theo chiều dọc
  Repeat: Lặp ảnh nền theo cả chiều ngang và dọc
  No-repeat: Không lặp ảnh
Cú pháp:

Ví dụ:

See the Pen MvrmYb by Thien (@anhtomks) on CodePen.0

d. Thuộc tính background-attachment

Dùng để thiết lập ảnh nền cố định tại một vị trí hay cuộn theo thanh cuộn trang. Giá trị  của thuộc tính này :
  Fixed: Cố đinh ảnh nền tại một vị trí
  Scroll: Ảnh nền tự động cuốn theo thanh cuộn
Cú pháp:

Ví dụ:

See the Pen BdJZzR by Thien (@anhtomks) on CodePen.0

e. Thuộc tính background-position

Dùng để thiết lập vị trí ảnh nền cho phần tử. Giá trị của thuộc tính này có thể sử dụng  đơn vị px hoặc % hoặc vị trí như (top, left, right, center, bottom).
Cú pháp :

Ví dụ:

See the Pen vp_css_bg_position_examp by Thien (@anhtomks) on CodePen.0

f. Cú pháp viết tắt

Ta có thể sử dụng tất cả các thuộc tính phông nền ở trên bằng cách viết tắt như sau:

Ví dụ :

 

 

Tác giả : Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here