Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp website của bạn lên hơn, đó là các thuộc tính thêm màu nền và ảnh nền cho website hoặc bất kỳ một phần tử dạng block nào.
Màu nền với background-color
Nếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính background-color và giá trị của nó là tên màu, hoặc mã màu HEX/RBG, mình thì thường dùng nhất là mã màu Hex vì nó đa dạng và dễ dùng hơn.
Ảnh nền với background-image
Đối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng background-image và nó còn có thêm khá nhiều thuộc tính khác nữa kèm theo mà mình sẽ nói bên dưới. Dưới đây là ví dụ lấy một tấm ảnh sử dụng làm
ảnh nền.
[codepen id=”dPBqbN”]
Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm url[] để bọc cái đường dẫn của URL lại nhé.
Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị url[] và các giá trị phải được cách nhau bởi dấu phẩy. Ví dụ:
background-image: url[‘ảnh 1’], url[‘ảnh 2’];
Tùy chỉnh lặp lại ảnh nền với background-repeat
Mặc định khi sử dụng ảnh nền, thì hình ảnh sẽ được lặp đi lặp lại theo cả chiều ngang và chiều
dọc cho đến khi ảnh nền lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp ảnh nền thông qua thuộc tính background-repeat, nó hỗ trợ các giá trị như sau:
no-repeat: Không lặp.repeat-x: Lặp theo chiều ngang.repeat-y: Lặp theo chiều dọc.space: Lặp đều theo chiều ngang và chiều dọc, ảnh nền sẽ cách nhau bằng khoảng trắng.round: Chưa hiểu lắm nên không giải thích.repeat: Mặc định.
Một ví dụ của DMD về việc lặp ảnh nền.
[codepen id=”yydQNK”]
Đổi vị trí ảnh nền với background-position
Đối với các tấm ảnh nền cỡ nhỏ hoặc dùng background-size để sửa lại kích thước thì có thể bạn sẽ cần thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể dùng thuộc tính background-position này. Nó có một số giá trị như sau:
top: hiển thị ở trên đầu phần tử.bottom: hiển thị bên dưới phần tử.left: hiển thị bên trái phần tử.right: hiển thị bên phải phần tử.center: hiển thị chính giữa phần tử.y-x: tùy biến vị trí hiển thị theo tọa độ, giá trị đứng trước là y và đứng sau là x. Ví dụ:15px 10px
Đối với thuộc tính này thì bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải phía trên phần tử thì sẽ có giá trị là left top. Bạn cũng có thể thiết lập giá trị cho nhiều ảnh nền cùng lúc kiểu left top, top center.
Ngoài ra còn có thêm một vài thuộc tính dành riêng cho việc tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé.
Lời kết
Mặc dù trong bài này mình không nói hết toàn bộ thuộc tính liên quan đến ảnh nền nhưng ở trên là các thuộc tính mà mình nghĩ rằng bạn sẽ cần sử dụng nhiều nhất nên bạn cứ tập trung làm quen với các thuộc tính đó trước, từ đó bạn sẽ cảm thấy bắt đầu với các thuộc tính tương tự dễ dàng hơn.
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.
Cách thiết lập màu nền cho một phần tử HTML
1] Cách thiết lập màu nền cho phần tử
- Thông thường thì các phần tử sẽ có nền "trong suốt", nếu muốn thiết lập lại màu nền cho phần tử thì chúng ta cần phải sử dụng thuộc tính background-color với cú pháp như sau:
background-color:value;- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị bên dưới:
| transparent | - Nền của phần tử sẽ trong suốt. | Xem ví dụ |
| color | - Chỉ định một màu sắc cụ thể [màu sắc này có thể được xác định dựa theo tên màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .] | Xem ví dụ |
| initial | - Sử dụng giá trị mặc định của nó. [mặc định thì thuộc tính background-color có giá trị là transparent] | |
| inherit | - Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó. | Xem ví dụ |
- Lưu ý: Thuộc tính background-color cũng thường được áp dụng trong việc đánh dấu văn bản.
Xem ví dụ
Học CSS miễn phí
Xem ví dụ
2] Điều chỉnh phạm vi được thiết lập màu nền
- Trong các bài học trước thì tôi đã từng có giới thiệu sơ qua về cấu trúc của một phần tử HTML, nó bao gồm bốn thành phần chính: margin border padding content
- Khi chúng ta sử dụng thuộc tính background-color để thiết lập màu nền cho phần tử thì mặc định phạm vi được thiết lập màu nền sẽ bắt đầu từ phần border cho đến hết phần content
- Tuy nhiên, với việc sử dụng thuộc tính background-clip thì chúng ta có thể điều chỉnh lại phạm vi được thiết lập màu nền của phần tử.
background-clip: value;- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị như sau:
| border-box | - Phạm vi được thiết lập màu nền sẽ bao gồm ba phần:
| Xem ví dụ |
| padding-box | - Phạm vi được thiết lập màu nền sẽ bao gồm hai phần:
| |
| content-box | - Phạm vi được thiết lập màu nền chỉ bao gồm phần: content | |
| initial | - Sử dụng giá trị mặc định của nó. [mặc định thì thuộc tính background-clip có giá trị là border-box] | |
| inherit | - Kế thừa giá trị thuộc tính background-clip từ phần tử cha của nó. |