Hướng dẫn change background-image color css - thay đổi màu nền-hình ảnh css
1) Thuộc tính background-image trong CSS- Thuộc tính background-image dùng để thiết lập "hình nền" cho phần tử.background-image dùng để thiết lập "hình nền" cho phần tử. Show
- Ví dụ: Phần tử này có nền là hình các bông hoa - Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập hình nền sẽ bao gồm các thành phần:
2) Cách sử dụng thuộc tính background-image trong CSS- Để sử dụng thuộc tính background-image, ta dùng cú pháp như sau:background-image, ta dùng cú pháp như sau: - Ta thấy giá trị của thuộc tính background-image có thể được xác định bởi một trong bốn loại:background-image có thể được xác định bởi một trong bốn loại:
none- Xác định việc "không thiết lập hình nền cho phần tử"
- Sử dụng giá trị mặc định của nó.(Mặc định thì phần tử không có hình nền, hay nói cách khác là trong suốt)url() (tấm hình nào được khai báo trước thì nó sẽ nằm đè lên tấm hình sau) inherit - Kế thừa giá trị thuộc tính background-image từ phần tử cha của nó inherit - Kế thừa giá trị thuộc tính background-image từ phần tử cha của nó3) Một số kỹ thuật cần quan tâm inherit - Kế thừa giá trị thuộc tính background-image từ phần tử cha của nó3) Một số kỹ thuật cần quan tâm - Chúng ta có hai kỹ thuật dùng để thiết lập hình nền cho phần tử cần phải quan tâm: Thứ nhất: Sử dụng nhiều hình ảnh để thiết lập hình nền cho phần tử.
Cố định ảnh nền - background-attachmentbackground-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. 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.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ó).
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 coralbackground-clip 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 background-clipẢnh nền với background-image Thuộc tính background-image: image | none Cú pháp:
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ử.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 Phần tử được tô bởi background-color rồi đên background-image .nen {
background-image: url(url-image1), url(url-image2);
}
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
|
