Các background-imagebất động sản trong CSS áp dụng một hình ảnh (ví dụ như PNG, SVG, JPG.webp, GIF, WebP) hoặc gradient để nền của một phần tử.
Có hai loại hình ảnh khác nhau mà bạn có thể đưa vào CSS: hình ảnh thông thường và hình ảnh chuyển sắc.
Hình ảnh
Sử dụng một hình ảnh trên nền khá đơn giản:
body ( background: url(sweettexture.jpg.webp); )Các url()giá trị cho phép bạn để cung cấp một đường dẫn tập tin với bất kỳ hình ảnh, và nó sẽ hiển thị như là nền tảng cho các phần tử đó.
Bạn cũng có thể đặt một URI dữ liệu cho url(). Nó trông như thế này:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Kỹ thuật này loại bỏ một yêu cầu HTTP, đó là một điều tốt. Tuy nhiên, có một số nhược điểm, vì vậy trước khi bắt đầu thay thế tất cả các hình ảnh của mình, hãy đảm bảo rằng bạn đã xem xét tất cả ưu và nhược điểm của URI dữ liệu.
Bạn cũng có thể sử dụng background-imageđể viết ảnh, đây là một phương pháp hữu ích khác để giảm yêu cầu HTTP.
Độ dốc
Một tùy chọn khác khi sử dụng hình nền là yêu cầu trình duyệt tạo một gradient. Dưới đây là một ví dụ đơn giản siêu duper về gradient tuyến tính:
body ( background: linear-gradient(black, white); )Bạn cũng có thể sử dụng gradient xuyên tâm:
body ( background: radial-gradient(circle, black, white); )Về mặt kỹ thuật, gradient chỉ là một dạng khác của ảnh nền. Sự khác biệt là trình duyệt tạo ra hình ảnh cho bạn. Đây là cách viết chúng: Cú pháp Gradient CSS3
Ví dụ trên chỉ sử dụng một gradient, nhưng bạn cũng có thể xếp nhiều gradient chồng lên nhau. Có một số mẫu khá tuyệt vời mà bạn có thể tạo bằng kỹ thuật này.
Đặt màu dự phòng
Nếu hình nền không tải được hoặc nền gradient của bạn được xem trên trình duyệt không hỗ trợ gradient, trình duyệt sẽ tìm màu nền làm màu dự phòng. Bạn có thể chỉ định màu dự phòng của mình như sau:
body ( background: url(sweettexture.jpg.webp) blue; )Nhiều hình nền
Bạn có thể sử dụng nhiều hình ảnh hoặc hỗn hợp hình ảnh và độ dốc cho nền của mình. Nhiều hình nền hiện được hỗ trợ tốt (tất cả các trình duyệt hiện đại và IE9 + cho hình ảnh đồ họa, IE10 + cho gradient).
Khi bạn đang sử dụng nhiều hình nền, hãy lưu ý rằng có một thứ tự xếp chồng hơi phản trực quan. Liệt kê hình ảnh nên ở phía trước đầu tiên và hình ảnh phải ở phía sau cuối cùng, như sau:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Khi bạn đang sử dụng nhiều hình nền, bạn thường cần đặt nhiều giá trị hơn cho hình nền để đưa mọi thứ vào đúng vị trí. Nếu bạn muốn sử dụng tốc backgroundký, bạn có thể đặt các giá trị cho từng hình ảnh riêng lẻ. Tốc ký của bạn sẽ trông giống như thế này (chú ý dấu phẩy ngăn cách giữa hình ảnh đầu tiên và các giá trị của nó với hình ảnh thứ hai và các giá trị của nó):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Không có giới hạn về số lượng hình nền bạn có thể đặt và bạn có thể làm những điều thú vị như tạo hiệu ứng cho hình nền của mình. Có một ví dụ điển hình về nhiều hình nền có hoạt ảnh trên blog của David Walsh.
Bản giới thiệu
Xem hình nền Bút của CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
- nền-tệp đính kèm
- nền-clip
- màu nền
- nền-nguồn gốc
- nền-vị trí
- Bối cảnh Lặp lại
- kích thước nền
Nhiêu tai nguyên hơn
- Thông số CSS3
- MDN
- Hình ảnh nền toàn trang hoàn hảo
- Thành thạo CSS Gradients (Slidedeck)
Hỗ trợ trình duyệt
Hình ảnh thông thường hoạt động ở mọi nơi và nhiều hình ảnh hoạt động trong các trình duyệt hiện đại và IE9 +. Đây là sự hỗ trợ cho gradient:
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3,6+ | 12,1+ | 10+ | 4+ | 5.1+ |