Bài giảng CSS - Bài 6: CSS Backgrounds

Chia sẻ: Phuc Nguyen | Ngày: | Loại File: PPTX | Số trang:52

Thêm vào BST

Báo xấu

73
lượt xem 11
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng cung cấp cho người học các kiến thức: CSS Backgrounds, thuộc tính Background, định kiểu màu, hình ảnh background, nội dung trang web,... Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu. Mời các bạn cùng tham khảo chi tiết nội dung tài liệu.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng CSS - Bài 6: CSS Backgrounds

Bài 6: CSS Backgrounds BỞI TRỊNH HỒNG
• Thuộc tính Background trong CSS dùng để định nghĩa background (hình nền) cho các phần tử • Các thuộc tính Background trong CSS bao gồm: • background-color • background-image • background-repeat • background-attachment
• Background Color • Thuộc tính background-color xác định màu nền cho các phần tử • Background Color của một trang được xác định theo cấu trúc sau:
• Ví dụ 1: • body { background-color: lightblue; }
• Trong CSS, có nhiều cách định kiểu màu, thường được sử dụng theo các cách sau: • Theo tên tiếng anh – ví dụ: “Red”- màu đỏ • Theo kết hợp giá trị màu RGB – ví dụ: “rgb(255, 0, 0)”- màu đỏ • Theo hệ thập lục phân HEX – ví dụ: “#ff0000” – màu đỏ
Trong ví dụ dưới đây, thẻ , và sẽ có background color khác nhau:
• Background Image • Thuộc tính background-image xác định một hình ảnh làm background cho một phần tử. • Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ phần tử. • Background image của một trang được xác định theo cấu trúc sau:
• CSS: body { background-image: url("//timoday.edu.vn/wp- content/uploads/2017/06/hinh-nen- powerpoint-don-gian-dep-30- 461x346.jpg"); }
Lưu ý: khi sử dụng hình ảnh làm background, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. Nếu không ảnh đó sẽ đè hoặc làm mờ chữ hoặc nội dung trang web của bạn.
• Ví dụ 4: • body { background-image: url(“bgdesert.jpg”); }