Các thuộc tính nền CSS được sử dụng để thêm hiệu ứng nền cho các phần tử. Show
Trong các chương này, bạn sẽ tìm hiểu về các thuộc tính nền CSS sau:
CSS nền nềnThuộc tính Thí dụMàu nền của một trang được đặt như thế này: Body {& nbsp; & nbsp; màu nền: lightBlue;} Hãy tự mình thử » Với CSS, một màu thường được chỉ định bởi:
Nhìn vào các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể. Các yếu tố khácBạn có thể đặt màu nền cho bất kỳ phần tử HTML nào: Thí dụMàu nền của một trang được đặt như thế này: Body {& nbsp; & nbsp; màu nền: lightBlue;} Hãy tự mình thử » Với CSS, một màu thường được chỉ định bởi: Hãy tự mình thử » Với CSS, một màu thường được chỉ định bởi:Tên màu hợp lệ - như "Red" Giá trị hex - như "#ff0000" When using the Giá trị RGB - như "RGB (255,0,0)"Nhìn vào các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể.RGBA color values. The following example sets the opacity for the background color and not the text: Các yếu tố khácalpha channel (RGBA) - which specifies the opacity for a color. Bạn có thể đặt màu nền cho bất kỳ phần tử HTML nào: Ở đây, các yếu tố, và các yếu tố sẽ có màu nền khác nhau: & nbsp; You will learn more about RGBA Colors in our CSS Colors Chapter. Thí dụMàu nền của một trang được đặt như thế này: Hãy tự mình thử » Với CSS, một màu thường được chỉ định bởi:
Thí dụHàm lặp lại-radial-gradient () được sử dụng để lặp lại độ dốc hướng tâm: #grad1 {& nbsp; Chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; Hình ảnh nền: Lặp đi lặp lại-Radial-Gradient (Đỏ, 10%màu vàng, xanh 20%);} Hãy tự mình thử » Thí dụHàm lặp lại-radial-gradient () được sử dụng để lặp lại độ dốc hướng tâm: #grad1 {& nbsp; Chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; Hình ảnh nền: Lặp đi lặp lại-Radial-Gradient (Đỏ, 10%màu vàng, xanh 20%);} Hãy tự mình thử » Các trang liên quan Hướng dẫn CSS: Bối cảnh CSS, nền CSS (Nâng cao), CSS GRADITHTham khảo HTML DOM: Thuộc tính BackoundImage Đặt hình ảnh nền cho phần tử: Mẹo: Bối cảnh của một phần tử là tổng kích thước của phần tử, bao gồm đệm và đường viền (nhưng không phải lề). The background of an element is the total size of the element, including padding and border (but not the margin). Mẹo: Luôn đặt màu nền sẽ được sử dụng nếu hình ảnh không khả dụng.Always set a background-color to be used if the image is unavailable. Đưa ra bản chạy thử ❯
Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Lưu ý: IE8 và trước đó không hỗ trợ nhiều hình ảnh nền. IE8 and earlier do not support multiple background images. CSS Cú phápHình ảnh nền: url | none | ban đầu | kế thừa; Giá trị tài sảnNhiều ví dụ hơnThí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Thí dụĐặt hai hình ảnh nền cho phần tử. Đặt hình ảnh đầu tiên chỉ xuất hiện một lần (không lặp lại) và để hình ảnh thứ hai được lặp lại: cơ thể {& nbsp; Hình ảnh nền: url ("img_tree.gif"), url ("paper.gif"); & nbsp; Bối cảnh lặp lại: không lặp lại, lặp lại; & nbsp; màu nền: #cccccc;} Hãy tự mình thử » Sử dụng các thuộc tính nền khác nhau để tạo hình ảnh "anh hùng":.hero-Image {& nbsp; Hình ảnh nền: URL ("Nhiếp ảnh gia.jpg"); / * Hình ảnh được sử dụng */& nbsp; Màu nền: #CCCCCC; / * Được sử dụng nếu hình ảnh không khả dụng */& nbsp; Chiều cao: 500px; / * Bạn phải đặt một chiều cao được chỉ định */& nbsp; Định vị nền: Trung tâm; / * Trung tâm hình ảnh */& nbsp; Bối cảnh lặp lại: Không lặp lại; / * Không lặp lại hình ảnh */& nbsp; Kích thước nền: Bìa; / * Thay đổi kích thước hình nền để che toàn bộ thùng chứa */} Đặt một gradient tuyến tính (hai màu) làm hình ảnh nền cho một phần tử: |