Một hình ảnh nền có thể được chỉ định cho hầu hết mọi phần tử HTML.
Nội phân Chính showShow
- Hình nền trên một phần tử HTML
- Hình nền trên một trang
- Bối cảnh Lặp lại
- Bìa nền
- Bối cảnh kéo dài
- Tìm hiểu thêm CSS
- Định nghĩa và cách sử dụng
- Hỗ trợ trình duyệt
- Giá trị tài sản
- Nhiều ví dụ hơn
- Các trang liên quan
Hình nền trên một phần tử HTML
Hình nền trên một trang
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
p {
background-image: url['img_girl.jpg'];
}
Tìm hiểu thêm CSS
Hình nền trên một trang
Bối cảnh Lặp lại
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
body {
background-image: url['img_girl.jpg'];
}
Tìm hiểu thêm CSS
Bối cảnh Lặp lại
Bìa nền
Bối cảnh Lặp lại
Bìa nền
body {
background-image: url['example_img_girl.jpg'];
}
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Bối cảnh Lặp lại
Bìa nền
body
{
background-image: url['example_img_girl.jpg'];
background-repeat: no-repeat;
}
Tìm hiểu thêm CSS
Bìa nền
Bối cảnh kéo dài
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Bối cảnh Lặp lại
Bìa nền
body {
background-image: url['img_girl.jpg'];
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Tìm hiểu thêm CSS
Bối cảnh kéo dài
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Bối cảnh Lặp lại
Bìa nền
body {
background-image: url['img_girl.jpg'];
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
Tìm hiểu thêm CSS
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
background-image: url["paper.gif"];
background-color: #cccccc;
}
Tìm hiểu thêm CSS
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
background-image: url["img_tree.gif"], url["paper.gif"];
background-color: #cccccc;
}
Tìm hiểu thêm CSS
Định nghĩa và cách sử dụng
Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Giá trị tài sản
Nhiều ví dụ hơn The background of an element is the total size of the element, including padding and border [but not the margin].
Các trang liên quanAlways set a background-color to be used if the image is unavailable.
Để thêm hình ảnh nền trên phần tử HTML, hãy sử dụng thuộc tính HTML style và thuộc tính CSS background-image:
| Thêm hình ảnh nền trên phần tử HTML: |
| no |
| Hãy tự mình thử » |
Bạn cũng có thể chỉ định hình nền trong phần tử |
| p {& nbsp; Hình ảnh nền: url ['img_girl.jpg']; } |
Hỗ trợ trình duyệt
Giá trị tài sản
| Các trang liên quan | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Để thêm hình ảnh nền trên phần tử HTML, hãy sử dụng thuộc tính HTML style và thuộc tính CSS background-image: IE8 and earlier do not support multiple background images.
Thí dụ
Thêm hình ảnh nền trên phần tử HTML:
Giá trị tài sản
Nhiều ví dụ hơn
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
background-image: url["img_tree.gif"],
url["paper.gif"];
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Tìm hiểu thêm CSS
Bối cảnh Lặp lại
Bìa nền
Bối cảnh kéo dài
background-image: url["photographer.jpg"]; /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /*
Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image: linear-gradient[red, yellow];
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image: linear-gradient[red, yellow, green];
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient[red, yellow 10%, green 20%];
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image: radial-gradient[red, yellow];
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image: radial-gradient[red, yellow, green];
}
Hãy tự mình thử »
Thí dụ
Đặt một gradient tuyến tính [hai màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; & nbsp; chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [màu đỏ, vàng];}
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient[red, yellow 10%, green 20%];
}
Hãy tự mình thử »
Đặt một gradient tuyến tính [ba màu] làm hình ảnh nền cho một phần tử:
#grad1 {& nbsp; Chiều cao: 200px; & nbsp; màu nền: #CCCCCC; & nbsp; hình nền: tuyến tính-gradient [đỏ, vàng, xanh lá cây];}
Hàm lặp lại linear-gradient [] được sử dụng để lặp lại độ dốc tuyến tính: