Lập trình CSS - Bài 6: CSS Backgrounds - Trịnh Hồng

Bài 6: CSS BackgroundsBỞ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-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionBackground ColorThuộ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 ImageThuộ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”);}Background Image – Lặp lại ảnh theo chiều dọc hoặc ngangMặc định thì thuộc tính background-image sẽ lặp ảnh cả 2 dạng dọc và ngang (horizontally và vertically).Một số ảnh nên được lặp ngang hoặc dọc, nếu không thì trông nó rất là xấu, không đẹp mắt, giống như sau:Ví dụ 5:body {background-image: url(“gradient_bg.png”);}CSS:body { background-image: url(""); }Nếu như ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), thì sẽ trông tốt hơn:Ví dụ 6:body {background-image: url(“gradient_bg.png”);background-repeat: repeat-x;}CSS:body { background-image: url(""); background-repeat: repeat-x; }Lưu ý: Để lặp lại một image theo chiều dọc (vertically), chúng ta set background-repeat: repeat-y;Background Image – Thiết lập vị trí và không lặpĐể hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính background-repeat:Ví dụ 7:body {background-image: url(“img_tree.png”);background-repeat: no-repeat;}CSS:body { background: #ffffff url(""); background-repeat: no-repeat;Trong ví dụ trên background image hiển thị cùng nơi với text. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất text quá nhiều.Vị trí của hình ảnh được xác định với thuộc tính background-position:Ví dụ 8:body {background-image: url(“img_tree.png”);background-repeat: no-repeat;background-position: right top;}HTML: Hello World! W3Schools background no-repeat, set position example. Now the background image is only shown once, and positioned away from the text. In this example we have also added a margin on the right side, so the background image will never disturb the text. CSS:body { background: #ffffff url(""); background-repeat: no-repeat; background-position: right top; margin-right: 300px; }Background Image – Cố định vị tríĐể chỉ định ảnh nền sẽ cố định (tức là nó sẽ không bị di chuyển mất khi cuộn), sử dụng thuộc tính background-attachment:Ví dụ 9:body {background-image: url(“img_tree.png”);background-repeat: no-repeat;background-position: right top;background-attachment: fixed;}HTML: Hello World! The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. If you do not see any scrollbars, try to resize the browser window. Thuộc tính background – Viết code ngắnĐể rút ngắn code, bạn có thể chỉ định tất cả các thuộc tính background trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Shorthand.Ví dụ 10:body {background: #ffffff url(“img_tree.png”) no-repeat right top;}HTML: Hello World! Now the background image is only shown once, and it is also positioned away from the text. In this example we have also added a margin on the right side, so that the background image will not disturb the text. Khi sử dụng thuộc tính shorthand thì thứ tự giá trị thuộc tính sẽ là :background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionNếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong shorthand thì không quan trọng, bạn chỉ việc không đưa nó vào miễn sao vẩn theo thứ tự như trên là được.Tất cả các thuộc tính Background trong CSS