Thuộc tính
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
2 trong CSS áp dụng một hình ảnh [e. g. PNG, SVG, JPG, GIF, WEBP] hoặc chuyển màu sang 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 bằng CSS. hình ảnh thông thường và độ dốc
Hình ảnh
Sử dụng hình ảnh trên nền khá đơn giản
body {
background: url[sweettexture.jpg];
}
Giá trị
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
3 cho phép bạn cung cấp đường dẫn tệp tới bất kỳ hình ảnh nào và nó sẽ hiển thị dưới dạng nền cho phần tử đóBạn cũng có thể đặt URI dữ liệu cho
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
3. Trông như thế nàybody {
/* 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, đây 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ạn 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ả các ưu và nhược điểm của URI dữ liệu
Bạn cũng có thể sử dụng
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
2 để chia nhỏ hình ả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 độ dốc. Đây là một ví dụ siêu đơn giản 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, độ dốc chỉ là một dạng khác của hình nền. Sự khác biệt là trình duyệt tạo hình ảnh cho bạn. Dưới đây là toàn bộ hướng dẫn về cách tạo và sử dụng chúng
Ví dụ trên chỉ sử dụng một dải màu, nhưng bạn cũng có thể xếp nhiều dải màu 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 chuyển màu của bạn được xem trên trình duyệt không hỗ trợ chuyển màu, thì 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ư thế này
body {
background: url[sweettexture.jpg] 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à chuyển màu 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 độ dốc]
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 giác. Liệt kê hình ảnh nên ở phía trước và hình ảnh nên ở phía sau, như thế này
body {
background: url[logo.png], url[background-pattern.png];
}
Khi bạn đang sử dụng nhiều hình nền, bạn sẽ thường cần đặt nhiều giá trị hơn cho nền để mọi thứ ở đúng vị trí. Nếu bạn muốn sử dụng tốc ký
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
1, 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ẽ giống như thế này [chú ý dấu phẩy ngăn cách 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] bottom center no-repeat,
url[background-pattern.png] 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
Thuộc tính màu nền trong CSS được sử dụng để đặt màu nền cho phần tử. Nó áp dụng các màu đồng nhất làm nền của phần tử. Nền của một phần tử bao phủ toàn bộ kích thước, bao gồm cả phần đệm và đường viền, nhưng không bao gồm lề. Nó có thể được áp dụng cho tất cả các phần tử HTML
cú pháp
Giá trị color_name của thuộc tính này xác định giá trị của màu nền hoặc chỉ định mã màu. Nó có thể được đưa ra bằng cách sử dụng tên màu, giá trị rgb[] hoặc giá trị thập lục phân
Giá trị trong suốt của thuộc tính này là giá trị mặc định, chỉ định màu nền trong suốt
Thí dụ
Trong ví dụ này, chúng tôi đang xác định giá trị của thuộc tính màu nền bằng cách sử dụng tên màu, giá trị thập lục phân, giá trị rgb[] và giá trị hsl[]. Có bốn phần tử div mà chúng tôi áp dụng thuộc tính màu nền
Cách dễ nhất để thay đổi màu của hình ảnh png là sử dụng thuộc tính bộ lọc, áp dụng hiệu ứng hình ảnh cho phần tử [hình ảnh]. Nó có các giá trị sau
________số 8
Với những giá trị này, chúng ta có thể thay đổi màu sắc của hình ảnh
Bộ lọc mới đối với trình duyệt và chỉ được hỗ trợ trong các trình duyệt hiện đại. Bạn có thể sử dụng -webkit-filter cho Safari, Google Chrome và Opera
Hãy từng bước thay đổi màu ảnh
- Sao chép và dán liên kết hình ảnh của bạn trong phần. Chúng tôi sử dụng hai hình ảnh với các lớp "hình ảnh-1" và "hình ảnh-2"
Bây giờ, chúng tôi thêm các kiểu vào các lớp "hình ảnh-1" và "hình ảnh-2"
- Sử dụng thuộc tính chiều rộng để đặt chiều rộng của cả hai hình ảnh
- Đặt thuộc tính bộ lọc với giá trị "đảo ngược" của nó trên lớp "hình ảnh-1". Chúng tôi đặt 100% để làm cho hình ảnh bị đảo ngược hoàn toàn
- Sử dụng thuộc tính bộ lọc với giá trị "nâu đỏ" [100%] trên lớp "image-2"
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
0Vì vậy, hãy xem kết quả của mã của chúng tôi
body {
/* Base64 encoded transparent gif */
background: url[data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7];
}
1Kết quả
Thay đổi màu ảnh PNG
Tiếp theo, hãy xem một ví dụ khác với tám giá trị của thuộc tính bộ lọc
Bạn cũng có thể áp dụng một kỹ thuật khác. Trong ví dụ tiếp theo, chúng tôi đặt thuộc tính id ["gốc" và "đã thay đổi"] cho