Hình nền có tác động đáng kể đến thiết kế của một trang web. Chúng giúp tạo giao diện của trang web, thiết lập các nhóm và chỉ định mức độ ưu tiên và chúng có ảnh hưởng đáng kể đến khả năng sử dụng của trang web Trong CSS, nền của phần tử có thể là một màu đơn sắc, một hình ảnh, một dải màu hoặc sự kết hợp của những thứ này. Khi chúng tôi quyết định cách triển khai các hình nền này, chúng tôi nên nhớ rằng mọi hình nền đều góp phần vào giao diện tổng thể của trang web của chúng tôi Trong bài học này, chúng ta sẽ xem cách gán các loại hình nền khác nhau, bao gồm cả độ dốc, cho các phần tử; Thêm màu nềnCách nhanh nhất để thêm nền vào phần tử là thêm nền một màu bằng thuộc tính 1
2
3
4
5 8 hoặc 1
2
3
4
5 9. Thuộc tính 1
2
3
4
5 8 chấp nhận màu sắc và hình ảnh ở dạng tốc ký, trong khi thuộc tính 1
2
3
4
5 9 được sử dụng nghiêm ngặt để đặt màu nền đồng nhất. Một trong hai thuộc tính sẽ hoạt động và thuộc tính nào bạn quyết định sử dụng tùy thuộc vào sở thích của bạn cũng như trường hợp bạn đang sử dụng thuộc tính đó1
2
3
4 div {
background-color: #b2b2b2;
}
Khi thêm màu nền, chúng tôi có một vài tùy chọn cho các giá trị mà chúng tôi có thể sử dụng. Cũng như các giá trị màu khác, chúng ta có thể chọn từ các từ khóa, mã thập lục phân và các giá trị RGB, RGBa, HSL và HSLa. Thông thường nhất, chúng ta sẽ thấy các giá trị thập lục phân; Nền trong suốtKhi sử dụng giá trị RGBa hoặc HSLa làm màu nền trong suốt, bạn cũng nên cung cấp màu dự phòng vì không phải tất cả các trình duyệt đều nhận ra giá trị RGBa hoặc HSLa. Hỗ trợ trình duyệt cụ thể là một vấn đề với Internet Explorer 8, nơi các giá trị RGBa và HSLa không được hỗ trợ. Và khi một trình duyệt chẳng hạn như Internet Explorer 8 gặp một giá trị mà nó không nhận ra, nó sẽ bỏ qua nó Nếu hỗ trợ Internet Explorer 8 là một vấn đề đáng lo ngại, may mắn thay, có một cách dễ dàng để cung cấp nền dự phòng. Xếp tầng CSS từ đầu tệp xuống cuối tệp; . Thuộc tính 1
2
3
4
5 9 đầu tiên sẽ sử dụng màu nền “an toàn”, chẳng hạn như giá trị thập lục phân và thuộc tính 1
2
3
4
5 9 thứ hai sẽ sử dụng giá trị RGBa hoặc HSLa. Ở đây, nếu một trình duyệt hiểu giá trị RGBa hoặc HSLa, nó sẽ hiển thị giá trị đó và nếu không, nó sẽ quay trở lại giá trị thập lục phân phía trên nó1
2
3
4
5 1
2
3
4
5 0Thêm hình nềnBên cạnh việc thêm màu nền cho phần tử, chúng ta cũng có thể thêm hình nền. Hình nền hoạt động tương tự như màu nền; . Như trước đây, chúng ta có thể sử dụng thuộc tính 1
2
3
4
5 8 với giá trị tốc ký hoặc chúng ta có thể sử dụng thuộc tính 1
2
3
4
5 26 hoàn toàn. Bất kể chúng tôi sử dụng thuộc tính nào, phải có nguồn hình ảnh được xác định bằng hàm 1
2
3
4
5 27Giá trị hàm 1
2
3
4
5 27 sẽ là đường dẫn của hình nền và các quy tắc quen thuộc để tạo đường dẫn siêu liên kết được áp dụng tại đây. Theo dõi các thư mục khác nhau và đảm bảo hiển thị chính xác vị trí của hình ảnh. Đường dẫn sẽ được đặt trong ngoặc đơn và được trích dẫn1
2
3
4 1
2
3
4
5 6Việc thêm hình nền chỉ sử dụng giá trị 1
2
3
4
5 29 có thể mang lại kết quả không mong muốn, vì theo mặc định, hình nền sẽ lặp lại theo chiều ngang và chiều dọc từ trên cùng bên trái của phần tử đã cho để lấp đầy nền của phần tử. Rất may, chúng tôi có thể sử dụng các thuộc tính 1
2
3
4
5 80 và 1
2
3
4
5 81 để kiểm soát cách thức hoặc thậm chí liệu hình ảnh có lặp lại hay khôngBối cảnh Lặp lạiTheo mặc định, hình nền sẽ lặp lại vô thời hạn, theo cả chiều dọc và chiều ngang, trừ khi có quy định khác. Thuộc tính 1
2
3
4
5 80 có thể được sử dụng để thay đổi hướng mà hình nền được lặp lại, nếu lặp lại hoàn toàn1
2
3
4
5 1
2
3
4
5 2Thuộc tính 1
2
3
4
5 80 chấp nhận bốn giá trị khác nhau. 1
2
3
4
5 84, 1
2
3
4
5 85, 1
2
3
4
5 86 và 1
2
3
4
5 87. Giá trị lặp lại là giá trị mặc định và sẽ lặp lại hình nền theo cả chiều dọc và chiều ngangGiá trị 1
2
3
4
5 85 sẽ lặp lại hình nền theo chiều ngang, trong khi giá trị 1
2
3
4
5 86 sẽ lặp lại hình nền theo chiều dọc. Cuối cùng, giá trị 1
2
3
4
5 87 sẽ yêu cầu trình duyệt hiển thị hình nền một lần—nghĩa là không lặp lại nóVị trí nềnTheo mặc định, hình nền được đặt ở góc trên bên trái của phần tử. Tuy nhiên, bằng cách sử dụng thuộc tính 1
2
3
4
5 81, chúng ta có thể kiểm soát chính xác vị trí đặt hình nền so với góc đó1
2
3
4
5 81
2
3
4
5 3Thuộc tính 1
2
3
4
5 81 yêu cầu hai giá trị. offset ngang (giá trị đầu tiên) và offset dọc (giá trị thứ hai). Nếu chỉ có một giá trị được chỉ định, thì giá trị đó được sử dụng cho phần bù ngang và phần bù dọc sẽ mặc định là 1
2
3
4
5 33Bởi vì chúng tôi đang di chuyển hình nền từ góc trên cùng bên trái của phần tử, các giá trị độ dài cụ thể sẽ liên quan đến góc đó Để đặt giá trị 1
2
3
4
5 81, chúng tôi có thể sử dụng từ khóa 1
2
3
4
5 35, 1
2
3
4
5 36, 1
2
3
4
5 37, 1
2
3
4
5 38 và 1
2
3
4
5 39, pixel, tỷ lệ phần trăm hoặc bất kỳ phép đo độ dài nào. Từ khóa và tỷ lệ phần trăm hoạt động rất giống nhau. Giá trị từ khóa div {
background-color: #b2b2b2;
}
00 giống hệt với giá trị phần trăm div {
background-color: #b2b2b2;
}
01, sẽ giữ hình ảnh ở vị trí ở góc trên cùng bên trái của phần tử. Giá trị từ khóa div {
background-color: #b2b2b2;
}
02 giống với giá trị phần trăm div {
background-color: #b2b2b2;
}
03, sẽ định vị một hình ảnh ở góc dưới cùng bên phải của phần tửHình 7Hình nền được định vị từ góc trên cùng bên trái của một phần tử Việc sử dụng pixel cho giá trị 1
2
3
4
5 81 cũng phổ biến, vì pixel cho phép chúng tôi kiểm soát chính xác vị trí nền của chúng tôi sẽ được định vịGiá trị hình nền tốc kýCác thuộc tính 1
2
3
4
5 9, 1
2
3
4
5 26, 1
2
3
4
5 81 và 1
2
3
4
5 80 có thể được cuộn lại thành một giá trị tốc ký cho riêng thuộc tính nền. Thứ tự của các thuộc tính này dưới dạng tốc ký giá trị thuộc tính 1
2
3
4
5 8 có thể khác nhau, tuy nhiên, nó thường rơi vào như 1
2
3
4
5 9, 1
2
3
4
5 26, 1
2
3
4
5 81, và sau đó là 1
2
3
4
5 801
2
3
4 div {
background-color: #b2b2b2;
}
1Ví dụ hình nềnTrong ví dụ sau, chúng tôi sẽ sử dụng thuộc tính 1
2
3
4
5 8 với giá trị tốc ký bao gồm các giá trị 1
2
3
4
5 9, 1
2
3
4
5 26, 1
2
3
4
5 81 và 1
2
3
4
5 80Xin lưu ý rằng có cả giá trị tương đối và giá trị tuyệt đối trong giá trị 1
2
3
4
5 81. Giá trị đầu tiên, div {
background-color: #b2b2b2;
}
20 pixel, là giá trị nằm ngang, định vị 1
2
3
4
5 26 div {
background-color: #b2b2b2;
}
20 pixel từ bên trái của phần tử. Giá trị thứ hai, 1
2
3
4
5 33, là giá trị theo chiều dọc, mà trung tâm theo chiều dọc của 1
2
3
4
5 26Một vài thuộc tính và giá trị khác cũng được bao gồm trong bộ quy tắc lớp div {
background-color: #b2b2b2;
}
25 để tạo kiểu thêm cho thông báo cảnh báoHTML1
2
3
4 div {
background-color: #b2b2b2;
}
3 CSSdiv {
background-color: #b2b2b2;
}
4div {
background-color: #b2b2b2;
}
5Trình diễn hình nềnXem Hình nền Bút của Shay Howe (@shayhowe) trên CodePen Trong thực tếQuay trở lại trang web Styles Conference của chúng ta, hãy thêm một số màu nền. Trong khi chúng tôi làm điều đó, chúng tôi sẽ thay đổi một số kiểu khác để giữ cho tất cả các kiểu của chúng tôi hoạt động cùng nhau và để giữ cho tất cả nội dung của chúng tôi dễ đọc Chúng tôi sẽ bắt đầu bằng cách thực hiện một bước tiến lớn và áp dụng nền màu xanh lam cho phần tử div {
background-color: #b2b2b2;
}
26 cùng với các thuộc tính div {
background-color: #b2b2b2;
}
27 và div {
background-color: #b2b2b2;
}
28 hiện có. Tất cả các kiểu cho bộ quy tắc phần tử div {
background-color: #b2b2b2;
}
26 hiện bao gồm các kiểu sau1
2
3
4
5 8div {
background-color: #b2b2b2;
}
7Chúng tôi đã cố ý đặt một 1
2
3
4
5 8 màu xanh lam trên phần tử div {
background-color: #b2b2b2;
}
26, vì trang web của chúng tôi sẽ có một vài hàng màu 1
2
3
4
5 8 khác nhau và màu 1
2
3
4
5 8 thường xuyên nhất sẽ là màu xanh lam
Giờ đây, mọi trang trên trang web Hội nghị Phong cách của chúng tôi đều có một 1
2
3
4
5 8 màu xanh lam, hãy dọn dẹp một số khu vực sẽ giữ nền màu xanh lam đó. Cụ thể, các yếu tố div {
background-color: #b2b2b2;
}
35 và div {
background-color: #b2b2b2;
}
36 của chúng tôi sẽ giữ nguyên màu xanh lam, cũng như phần anh hùng trên trang chủTrong các phần tử div {
background-color: #b2b2b2;
}
35 và div {
background-color: #b2b2b2;
}
36 của chúng tôi, hãy làm cho tất cả các màu liên kết của chúng tôi bắt đầu là màu trắng và sau đó, khi được di chuột qua, chuyển sang màu xanh lục giống như các tiêu đề của chúng tôiChúng tôi sẽ bắt đầu với yếu tố div {
background-color: #b2b2b2;
}
35 của chúng tôi. Để chọn tất cả các phần tử div {
background-color: #b2b2b2;
}
40 trong phần tử div {
background-color: #b2b2b2;
}
35, chúng tôi sẽ thêm một lớp div {
background-color: #b2b2b2;
}
42 vào phần tử div {
background-color: #b2b2b2;
}
35 (ngoài các lớp div {
background-color: #b2b2b2;
}
44 và div {
background-color: #b2b2b2;
}
45 hiện có). Đừng quên, chúng tôi sẽ cần thêm lớp này vào các phần tử div {
background-color: #b2b2b2;
}
35 trên tất cả các trang của chúng tôi1
2
3
4 div {
background-color: #b2b2b2;
}
9Với lớp div {
background-color: #b2b2b2;
}
42 tại chỗ trên phần tử div {
background-color: #b2b2b2;
}
35 và lớp div {
background-color: #b2b2b2;
}
49 hiện tại tại chỗ trên phần tử div {
background-color: #b2b2b2;
}
36, chúng tôi có thể thêm hai bộ quy tắc mới vào cuối phần liên kết trong tệp div {
background-color: #b2b2b2;
}
51 của chúng tôiBộ quy tắc đầu tiên sẽ chọn tất cả các phần tử div {
background-color: #b2b2b2;
}
40 trong một phần tử có giá trị thuộc tính lớp là div {
background-color: #b2b2b2;
}
42 hoặc div {
background-color: #b2b2b2;
}
49 và đặt div {
background-color: #b2b2b2;
}
27 của chúng thành màu trắng, như được xác định bằng dấu phẩy phân tách hai bộ chọn riêng lẻ có chung thuộc tính và giá trị. Bộ quy tắc thứ hai sẽ chọn các phần tử div {
background-color: #b2b2b2;
}
40 giống như trước đây nhưng sẽ thay đổi phần tử div {
background-color: #b2b2b2;
}
27 của chúng thành màu xanh lục khi người dùng di chuột qua chúngdiv {
background-color: #b2b2b2;
}
41
2
3
4
5 1
Trong khi chúng tôi đang làm cho một số văn bản của chúng tôi có màu trắng, chúng ta cũng hãy làm cho văn bản trong phần anh hùng của trang chủ của chúng tôi có màu trắng, vì nó sẽ vẫn ở trên một 1
2
3
4
5 8 màu xanh lam. Chúng tôi có sẵn bộ quy tắc lớp div {
background-color: #b2b2b2;
}
59 hiện có để thêm kiểu vào, vì vậy hãy thêm văn bản trắng của chúng tôi div {
background-color: #b2b2b2;
}
27 vào đó. Nói chung, bộ quy tắc lớp div {
background-color: #b2b2b2;
}
59 của chúng tôi nên bao gồm những điều sau đây1
2
3
4
5 2____03
Cũng trong phần anh hùng của trang chủ của chúng tôi, hãy dọn dẹp một số kiểu nút. Chúng tôi sẽ bắt đầu bằng cách thêm một số thuộc tính mới vào bộ quy tắc lớp div {
background-color: #b2b2b2;
}
62 của chúng tôi, trong phần nút của tệp div {
background-color: #b2b2b2;
}
51 của chúng tôiCụ thể, hãy đặt văn bản nút div {
background-color: #b2b2b2;
}
27 thành màu trắng, đảm bảo rằng div {
background-color: #b2b2b2;
}
65 của chúng tôi luôn là div {
background-color: #b2b2b2;
}
66, tăng div {
background-color: #b2b2b2;
}
67, thêm một lượng nhỏ div {
background-color: #b2b2b2;
}
68 và thay đổi div {
background-color: #b2b2b2;
}
69 của chúng tôi thành div {
background-color: #b2b2b2;
}
70Nói chung, bộ quy tắc lớp div {
background-color: #b2b2b2;
}
62 mới của chúng ta sẽ trông như thế này1
2
3
4
5 41
2
3
4
5 5Chúng tôi cũng sẽ xóa một số kiểu nút thay thế bằng bộ quy tắc lớp div {
background-color: #b2b2b2;
}
72. Cụ thể, hãy tạo đường viền của các nút màu trắng và thêm các kiểu di chuột bao gồm 1
2
3
4
5 8 màu trắng và văn bản màu xanh lam div {
background-color: #b2b2b2;
}
27Với tất cả các phần bổ sung, bộ quy tắc lớp div {
background-color: #b2b2b2;
}
72 mới của chúng ta sẽ trông như thế nàydiv {
background-color: #b2b2b2;
}
41
2
3
4
5 7
Bây giờ chúng ta đã dọn sạch tất cả các khu vực có nền màu xanh lam, hãy thêm kiểu cho các hàng có nền màu trắng. Hãy tạo một phần mới trong tệp div {
background-color: #b2b2b2;
}
51 của chúng tôi cho các hàng, ngay bên dưới phần Clearfix. Trong phần hàng mới này, hãy tạo một bộ chọn lớp mới có tên là div {
background-color: #b2b2b2;
}
77Trong bộ quy tắc lớp div {
background-color: #b2b2b2;
}
77 mới của chúng tôi, hãy thêm một 1
2
3
4
5 8 màu trắng, một div {
background-color: #b2b2b2;
}
80 tối thiểu của div {
background-color: #b2b2b2;
}
81 pixel (để đảm bảo các phần tử div {
background-color: #b2b2b2;
}
77 của chúng tôi luôn lớn hơn các phần tử div {
background-color: #b2b2b2;
}
80 của các phần tử div {
background-color: #b2b2b2;
}
44 hoặc div {
background-color: #b2b2b2;
}
85 của chúng tôi) và một số div {
background-color: #b2b2b2;
}
86 theo chiều dọc. Toàn bộ phần hàng mới của chúng tôi trong tệp div {
background-color: #b2b2b2;
}
51 của chúng tôi sẽ trông như thế này1
2
3
4
5 81
2
3
4
5 9
Với các kiểu lớp div {
background-color: #b2b2b2;
}
77 của chúng ta, hãy thêm một hàng có 1
2
3
4
5 8 màu trắng vào trang chủ của chúng ta. Chúng tôi sẽ làm điều này trên phần trêu ghẹo của chúng tôi. Hiện tại, khu vực này có một phần tử div {
background-color: #b2b2b2;
}
90 với lớp lưới bao gồm ba phần tử div {
background-color: #b2b2b2;
}
90 bổ sung với các lớp trêu ghẹo và div {
background-color: #b2b2b2;
}
92Để thêm một 1
2
3
4
5 8 màu trắng vào phần này, chúng ta sẽ bọc tất cả các phần tử này trong một phần tử có lớp div {
background-color: #b2b2b2;
}
77Bởi vì chúng tôi muốn toàn bộ phần giới thiệu được bao bọc trong một phần tử div {
background-color: #b2b2b2;
}
90, chúng tôi sẽ thêm một phần tử div {
background-color: #b2b2b2;
}
90 mới với lớp div {
background-color: #b2b2b2;
}
77 bao quanh phần tử div {
background-color: #b2b2b2;
}
90 hiện có với lớp div {
background-color: #b2b2b2;
}
85Có hai phần tử div {
background-color: #b2b2b2;
}
90 bao bọc chính xác cùng một nội dung làm giảm giá trị ngữ nghĩa. Để sửa lỗi này, chúng tôi sẽ thay đổi phần tử div {
background-color: #b2b2b2;
}
90 thứ hai, phần tử có lớp div {
background-color: #b2b2b2;
}
85, thành phần tử 1
2
3
4
5 03. Rốt cuộc, tại thời điểm này, phần tử này chỉ thêm kiểu chứ không phải ý nghĩa ngữ nghĩa và phù hợp làm phần tử 1
2
3
4
5 03Cấu trúc của yếu tố trêu ghẹo mới của chúng tôi sẽ trông như thế này 1
2
3
4
5 001
2
3
4
5 01
Thật đáng kinh ngạc khi một vài màu nền có thể ảnh hưởng đến thiết kế của một trang web. Trang web Hội nghị Phong cách của chúng tôi đang hoạt động khá tốt và trang chủ của chúng tôi là bằng chứng Hình 7Trang chủ trang web Styles Conference của chúng tôi sau khi thêm một số màu nền Thiết kế nền GradientNền chuyển màu đã được giới thiệu với CSS3 và các nhà thiết kế cũng như nhà phát triển giao diện người dùng ở mọi nơi đều vui mừng. Mặc dù nền chuyển màu không hoạt động trong các trình duyệt cũ nhưng chúng được hỗ trợ bởi tất cả các trình duyệt hiện đại Trong CSS, nền gradient được coi là hình nền. Chúng ta có thể tạo một gradient bằng cách sử dụng các thuộc tính 1
2
3
4
5 8 hoặc 1
2
3
4
5 26, giống như một hình nền thông thường. Giá trị thuộc tính cho nền gradient khác nhau tùy thuộc vào loại gradient chúng ta muốn, tuyến tính hay xuyên tâmTiền tố nhà cung cấp nền GradientTrong Bài 4, “Mở Box Model”, chúng ta đã thảo luận về việc thêm tiền tố nhà cung cấp vào các thuộc tính hoặc giá trị CSS mới để trình duyệt có thể hỗ trợ các tính năng CSS được phát triển gần đây. Giá trị nền chuyển màu là một trong những giá trị yêu cầu sử dụng tiền tố của nhà cung cấp. May mắn thay, kể từ đó, hầu hết các trình duyệt đã loại bỏ nhu cầu về tiền tố nhà cung cấp để hiển thị nền dốc; Lúc đầu, khi chúng tôi bắt đầu thảo luận về nền dốc tuyến tính, chúng tôi sẽ bao gồm từng tiền tố nhà cung cấp khác nhau. Sau đó, để cho ngắn gọn, chúng tôi sẽ bỏ qua các tiền tố khác nhau khi chúng tôi tiếp tục thảo luận về nền chuyển sắc, bao gồm cả nền chuyển sắc xuyên tâm Nền Gradient Tuyến TínhTrong nhiều năm, các nhà thiết kế và nhà phát triển đã cắt các tệp hình ảnh gradient, được tạo bằng phần mềm xử lý hình ảnh và sử dụng chúng làm nền gradient tuyến tính trên các thành phần. Quá trình này hoạt động, nhưng phải mất một thời gian để thực hiện và rất không linh hoạt. May mắn thay, những ngày đó đã không còn nữa và giờ đây, nền gradient tuyến tính có thể được chỉ định trong CSS. Nếu một màu cần thay đổi, không cần phải sao chép và cắt lại hình ảnh và tải nó lên máy chủ. Bây giờ tất cả những gì chúng ta cần làm là thay đổi nhanh một giá trị trong CSS. Xinh đẹp 1
2
3
4
5 21
2
3
4
5 03Bản trình diễn nền gradient tuyến tínhXem Nền chuyển màu tuyến tính bút của Shay Howe (@shayhowe) trên CodePen Độ dốc tuyến tính được xác định bằng cách sử dụng hàm 1
2
3
4
5 07 trong thuộc tính 1
2
3
4
5 8 hoặc 1
2
3
4
5 26. Hàm 1
2
3
4
5 07 phải bao gồm hai giá trị màu, giá trị đầu tiên sẽ là giá trị màu bắt đầu và giá trị thứ hai sẽ là giá trị màu kết thúc. Sau đó, trình duyệt sẽ xử lý quá trình chuyển đổi giữa hai màuTrước khi bất kỳ nền chuyển màu nào được xác định, chúng tôi cũng sẽ đặt thuộc tính 1
2
3
4
5 8 mặc định với một màu đồng nhất. Màu đơn sắc sẽ được sử dụng làm dự phòng nếu trình duyệt không hỗ trợ nền chuyển màuThay đổi hướng của nền dốcTheo mặc định, nền chuyển sắc tuyến tính di chuyển từ trên xuống dưới của một phần tử, chuyển đổi mượt mà giữa giá trị màu đầu tiên và giá trị màu thứ hai. Tuy nhiên, hướng này có thể được thay đổi bằng cách sử dụng từ khóa hoặc giá trị độ được nêu trước bất kỳ giá trị màu nào Ví dụ: nếu chúng ta muốn một dải màu di chuyển từ bên trái của một phần tử sang bên phải, chúng ta có thể sử dụng giá trị từ khóa 1
2
3
4
5 12 để xác định hướng mà dải màu tuyến tính sẽ tiến triển. Giá trị từ khóa cũng có thể được kết hợp. Nếu chúng ta muốn gradient di chuyển từ trên cùng bên trái sang dưới cùng bên phải của một phần tử, chúng ta có thể sử dụng giá trị từ khóa của 1
2
3
4
5 131
2
3
4
5 1
2
3
4
5 05Bản trình diễn hướng nền gradient tuyến tínhXem Pen Linear Gradient Background Direction của Shay Howe (@shayhowe) trên CodePen Khi chúng ta sử dụng gradient chéo trên một phần tử không phải là hình vuông chính xác, gradient nền sẽ không chuyển trực tiếp từ góc này sang góc khác. Thay vào đó, gradient sẽ xác định tâm tuyệt đối của phần tử, đặt các neo ở các góc vuông góc từ nơi nó sẽ tiến tới, sau đó di chuyển đến hướng chung của góc được nêu trong giá trị. Những góc mà gradient di chuyển về phía này được gọi là "góc ma thuật", vì chúng không tuyệt đối. Eric Meyer đã thực hiện một công việc tuyệt vời trong việc phác thảo cú pháp này trong bài viết của anh ấy “Từ khóa Gradient tuyến tính” Bên cạnh từ khóa, giá trị độ cũng được chấp nhận. Nếu chúng tôi muốn chuyển màu của mình di chuyển lên trên cùng bên trái của một phần tử, chúng tôi có thể sử dụng giá trị độ của 1
2
3
4
5 14 hoặc nếu chúng tôi muốn chuyển màu của mình di chuyển xuống dưới cùng bên phải của một phần tử, chúng tôi có thể sử dụng giá trị độ của 1
2
3
4
5 15. Khái niệm tương tự này có thể được áp dụng cho bất kỳ giá trị bằng cấp nào, từ 1
2
3
4
5 16 đến 1
2
3
4
5 17Nền Gradient xuyên tâmMặc dù gradient tuyến tính là hoàn hảo cho một gradient di chuyển từ hướng này sang hướng khác, nhưng thường thì nhu cầu về gradient xuyên tâm phát sinh. Độ dốc nền xuyên tâm hoạt động giống như độ dốc tuyến tính và chia sẻ nhiều giá trị giống nhau. Đối với độ dốc xuyên tâm, thay vì sử dụng hàm 1
2
3
4
5 07 trong thuộc tính 1
2
3
4
5 8 hoặc 1
2
3
4
5 26, chúng tôi sẽ sử dụng hàm 1
2
3
4
5 21_______107Bản trình diễn Nền Radial GradientXem Pen Radial Gradient Background của Shay Howe (@shayhowe) trên CodePen Radial gradient hoạt động từ trong ra ngoài của một phần tử. Do đó, màu đầu tiên được xác định trong hàm 1
2
3
4
5 21 sẽ nằm ở trung tâm tuyệt đối của phần tử và màu thứ hai sẽ nằm ở bên ngoài phần tử. Sau đó, trình duyệt sẽ tạo ra sự chuyển đổi giữa hai màuMột trong những khác biệt cơ bản giữa gradient xuyên tâm và gradient tuyến tính là gradient xuyên tâm có thể khá phức tạp, với các giá trị cho vị trí, kích thước, bán kính, v.v. Chúng tôi sẽ đề cập đến những điều cơ bản, nhưng vui lòng tìm hiểu sâu hơn về độ dốc xuyên tâm, vì chúng cung cấp nhiều năng lượng hơn so với được nêu ở đây Trình tạo nền Gradient CSS3Đôi khi, làm việc với các gradient CSS3 bằng tay có thể khá khó khăn, đặc biệt nếu bạn chưa quen với chúng. May mắn thay, một vài trình tạo độ dốc CSS3 đã xuất hiện. Mỗi trình tạo hoạt động hơi khác một chút và một số cung cấp nhiều tùy chọn hơn những trình tạo khác. Nếu bạn quan tâm, tôi khuyên bạn nên thực hiện một số nghiên cứu để tìm ra máy phát điện phù hợp với nhu cầu của bạn Điểm dừng màu GradientỞ mức tối thiểu, nền chuyển màu sẽ chuyển từ màu này sang màu khác; . Để làm điều này, chúng tôi sẽ thêm các điểm dừng màu vào chức năng chuyển màu đã cho, với dấu phẩy phân tách từng điểm dừng màu với điểm dừng tiếp theo 1
2
3
4
5 1
2
3
4
5 09Bản demo dừng màu gradientXem các điểm dừng màu chuyển sắc của bút bởi Shay Howe (@shayhowe) trên CodePen Theo mặc định, trình duyệt sẽ định vị mọi điểm dừng màu cách điểm tiếp theo một khoảng bằng nhau và sẽ chuyển đổi giữa chúng tương ứng. Nếu muốn kiểm soát nhiều hơn cách định vị màu, một vị trí dọc theo dải màu có thể được xác định cho mỗi điểm dừng màu. Vị trí phải được khai báo dưới dạng giá trị độ dài và phải nằm sau giá trị màu 1
2
3
4
5 1
2
3
4 1Bản demo vị trí dừng màu gradientXem Vị trí dừng màu của dải màu bút của Shay Howe (@shayhowe) trên CodePen Trừ khi có quy định khác, điểm dừng màu đầu tiên sẽ được đặt ở vị trí 1
2
3
4
5 23 và điểm dừng màu cuối cùng sẽ được đặt ở vị trí 1
2
3
4
5 24Ví dụ Nền GradientSử dụng cùng một thông báo cảnh báo thành công từ trước đó, chúng tôi sẽ hoán đổi hình nền cũ cho hình nền gradient tuyến tính Đối với điều này, chúng tôi sẽ bao gồm hai thuộc tính 1
2
3
4
5 8. Thuộc tính 1
2
3
4
5 8 đầu tiên chỉ định giá trị thập lục phân màu đơn sắc, đóng vai trò dự phòng nếu trình duyệt không hỗ trợ nền gradient tuyến tính. Thuộc tính 1
2
3
4
5 8 thứ hai bao gồm hàm 1
2
3
4
5 07, xác định nền chuyển màu xanh lá cây chuyển từ đầu phần tử xuống cuối phần tửHTML1
2
3
4 div {
background-color: #b2b2b2;
}
3 CSS1
2
3
4 41
2
3
4 5Bản trình diễn Nền GradientXem Nền chuyển màu bút của Shay Howe (@shayhowe) trên CodePen Trong thực tếVới các nền chuyển màu hiện đã được trộn lẫn, hãy tạo một hàng mới cho trang web Hội nghị Phong cách của chúng ta, lần này sử dụng một chuyển màu Chúng ta sẽ tạo một hàng mới với nền gradient bằng cách sử dụng lớp 1
2
3
4
5 29. Vì hàng mới sẽ chia sẻ cùng một thuộc tính và giá trị 1
2
3
4
5 30 như bộ chọn lớp div {
background-color: #b2b2b2;
}
77, nên chúng tôi sẽ kết hợp hai bộ chọn này1
2
3
4
5 1
2
3
4 7Tiếp theo, chúng tôi sẽ muốn tạo các bộ quy tắc mới để áp dụng các kiểu cụ thể cho bộ chọn lớp 1
2
3
4
5 29. Các kiểu mới này sẽ bao gồm nền chuyển màu bắt đầu bằng màu xanh lá cây và chuyển sang màu vàng, từ trái sang phảiSử dụng hàm 1
2
3
4
5 07 với các giá trị thích hợp và tiền tố của nhà cung cấp, chúng tôi sẽ thêm gradient 1
2
3
4
5 8 vào bộ quy tắc lớp 1
2
3
4
5 29. Chúng tôi cũng sẽ bao gồm một màu 1
2
3
4
5 8 duy nhất trước gradient 1
2
3
4
5 8 dưới dạng dự phòng, chỉ trong trường hợp trình duyệt không hỗ trợ nền gradientCuối cùng, chúng tôi cũng sẽ thêm vào một số div {
background-color: #b2b2b2;
}
86 dọc. Phần hàng được cập nhật của chúng tôi bây giờ trông như thế này1
2
3
4 81
2
3
4 9
Với các kiểu 1
2
3
4
5 29 của chúng tôi, hãy sử dụng chúng trên tất cả các trang nội thất của chúng tôi. Hiện tại, tất cả các trang bên trong của chúng tôi đều có phần tử div {
background-color: #b2b2b2;
}
90 với lớp div {
background-color: #b2b2b2;
}
44. Sau đó, bên trong mỗi phần tử div {
background-color: #b2b2b2;
}
90 là một phần tử 1
2
3
4
5 43 chứa tiêu đề của trangChúng tôi sẽ thay đổi các yếu tố div {
background-color: #b2b2b2;
}
90 này giống như chúng tôi đã làm với yếu tố div {
background-color: #b2b2b2;
}
90 trêu ghẹo trên trang chủ của chúng tôi. Chúng ta sẽ bọc từng phần tử div {
background-color: #b2b2b2;
}
90 với lớp div {
background-color: #b2b2b2;
}
44 trong phần tử div {
background-color: #b2b2b2;
}
90 với lớp 1
2
3
4
5 29. Sau đó, chúng tôi sẽ thay đổi từng phần tử div {
background-color: #b2b2b2;
}
90 với một lớp div {
background-color: #b2b2b2;
}
44 thành phần tử 1
2
3
4
5 03 để căn chỉnh ngữ nghĩa tốt hơnMỗi trang bên trong của chúng tôi bây giờ sẽ bao gồm những điều sau đây 1
2
3
4
5 601
2
3
4
5 61
Bởi vì chúng tôi đang cập nhật các trang bên trong của mình, hãy làm cho phần giới thiệu hoặc lời dẫn của họ hấp dẫn hơn một chút. Chúng ta sẽ bắt đầu bằng cách thêm một đoạn văn giới thiệu từng trang ngay bên dưới phần tử 1
2
3
4
5 43 trong mỗi phần tử div {
background-color: #b2b2b2;
}
90 với lớp là 1
2
3
4
5 29. Ví dụ: trang 1
2
3
4
5 56 của chúng tôi hiện có thể bao gồm phần dẫn sau1
2
3
4 41
2
3
4
5 63
Ngoài việc chèn đoạn văn, chúng ta cũng hãy thay đổi một số kiểu trong phần dẫn đầu. Để làm điều này, chúng tôi sẽ thêm một lớp 1
2
3
4
5 57 vào phần tử 1
2
3
4
5 03 đã có một lớp div {
background-color: #b2b2b2;
}
44; . Phần dẫn đầu của chúng tôi cho mỗi trang bên trong bây giờ sẽ trông như thế này1
2
3
4
5 601
2
3
4
5 65
Khi đã có lớp 1
2
3
4
5 57, chúng tôi sẽ căn giữa tất cả văn bản trong các phần tử 1
2
3
4
5 03 này. Chúng tôi cũng sẽ tăng 1
2
3
4
5 64 và 1
2
3
4
5 65 của bất kỳ đoạn nào trong các yếu tố 1
2
3
4
5 03 nàyChúng tôi sẽ tạo một phần mới cho khách hàng tiềm năng trong tệp div {
background-color: #b2b2b2;
}
51 của chúng tôi, ngay bên dưới phần kiểu chữ và thêm các kiểu sau1
2
3
4
5 661
2
3
4
5 67
Các trang bên trong của trang web Hội nghị Phong cách của chúng tôi hiện đã nhận được một số tình yêu quá hạn từ lâu dưới dạng các hàng và khách hàng tiềm năng nền chuyển màu. Đảm bảo xem lại mã cho tất cả các trang bên trong để xem nội dung, tiêu đề và đoạn văn mới được nâng cao của chúng Hình 7Trang Diễn giả của trang web Hội nghị Phong cách của chúng tôi, hoàn chỉnh với một hàng nền chuyển màu Demo và mã nguồnBên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại Xem Trang web Styles Conference hoặc Tải xuống Mã nguồn (Tệp zip) Sử dụng nhiều hình nềnTrong thời gian dài nhất, các phần tử chỉ được phép có một hình nền tại một thời điểm, điều này tạo ra khá nhiều hạn chế khi thiết kế trang. May mắn thay, với CSS3, giờ đây chúng ta có thể sử dụng nhiều hơn một hình nền trên một phần tử bằng cách phân tách nhiều giá trị nền bằng dấu phẩy trong thuộc tính 1
2
3
4
5 8 hoặc 1
2
3
4
5 26Giá trị hình nền xuất hiện đầu tiên sẽ là hình nền phía trước và hình nền được liệt kê cuối cùng sẽ là hình nền phía sau. Bất kỳ giá trị nào giữa giá trị đầu tiên và giá trị cuối cùng sẽ nằm trong vùng trung gian tương ứng. Đây là một ví dụ về CSS cho phần tử 1
2
3
4
5 03 sử dụng ba hình nền1
2
3
4 1
2
3
4
5 69Đoạn mã trước sử dụng giá trị tốc ký cho thuộc tính nền, xâu chuỗi nhiều giá trị hình nền lại với nhau. Các giá trị tốc ký này cũng có thể được chia thành các giá trị được phân tách bằng dấu phẩy trên các thuộc tính 1
2
3
4
5 26, 1
2
3
4
5 81 và 1
2
3
4
5 80Ví dụ về nhiều hình nềnHãy quay lại thông báo cảnh báo thành công một lần nữa để kết hợp cả hình nền đánh dấu và hình nền gradient tuyến tính Để làm như vậy, chúng tôi sẽ bao gồm hai giá trị trong thuộc tính nền thứ hai. Giá trị đầu tiên, hình ảnh quan trọng nhất, sẽ là hình ảnh đánh dấu. Giá trị thứ hai, hình ảnh ngoài cùng, sẽ là gradient tuyến tính. Hai giá trị được phân tách bằng dấu phẩy HTML1
2
3
4 div {
background-color: #b2b2b2;
}
3 CSS1
2
3
4 41
2
3
4
5 3Bản trình diễn nhiều hình nềnXem nhiều hình ảnh nền về bút của Shay Howe (@shayhowe) trên CodePen Khám phá các thuộc tính nền mớiCùng với nền gradient và nhiều hình nền, CSS3 cũng giới thiệu ba thuộc tính CSS mới. 1
2
3
4
5 74, 1
2
3
4
5 75 và 1
2
3
4
5 76Thuộc tính 1
2
3
4
5 74 cho phép chúng ta thay đổi kích thước của ảnh nền, trong khi thuộc tính 1
2
3
4
5 75 và 1
2
3
4
5 76 cho phép chúng ta kiểm soát vị trí cắt ảnh nền và vị trí chứa ảnh nền trong thành phần (bên trong đường viền hoặc bên trong phần đệm, ví dụ: Kích thước nền CSS3Thuộc tính 1
2
3
4
5 74 cho phép chúng tôi chỉ định kích thước cho hình nền. Thuộc tính chấp nhận một số giá trị khác nhau, bao gồm giá trị độ dài và từ khóaKhi sử dụng các giá trị chiều dài, chúng ta có thể chỉ định giá trị chiều rộng và chiều cao bằng cách sử dụng hai giá trị được phân tách bằng dấu cách. Giá trị đầu tiên sẽ đặt chiều rộng của hình nền, trong khi giá trị thứ hai sẽ đặt chiều cao của hình nền. Điều quan trọng cần lưu ý là các giá trị phần trăm liên quan đến kích thước của phần tử, không phải kích thước ban đầu của hình nền Do đó, đặt thuộc tính 1
2
3
4
5 74 với chiều rộng 1
2
3
4
5 24 sẽ làm cho hình nền chiếm toàn bộ chiều rộng của phần tử. Nếu giá trị thứ hai không được xác định sau chiều rộng, thì giá trị chiều cao sẽ được đặt tự động để duy trì tỷ lệ khung hình của hình nềnGiá trị từ khóa 1
2
3
4
5 83 có thể được sử dụng làm giá trị chiều rộng hoặc chiều cao để duy trì tỷ lệ khung hình của hình nền. Ví dụ: nếu chúng tôi muốn đặt chiều cao của hình nền là 1
2
3
4
5 84 chiều cao của phần tử trong khi vẫn duy trì tỷ lệ khung hình của hình ảnh, chúng tôi có thể sử dụng giá trị thuộc tính 1
2
3
4
5 74 của auto 1
2
3
4
5 841
2
3
4
5 60
|