Chúng ta có thể thay đổi màu nền của hình ảnh trong css không?

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ền

Cá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ốt
Khi 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ể , trong đó 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
0
Thêm hình nền
Bê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
27
Giá 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ẫn
1
2
3
4
1
2
3
4
5
6
Việ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ông
Bối cảnh Lặp lại
Theo 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àn
1
2
3
4
5
1
2
3
4
5
2
Thuộc tính 
1
2
3
4
5
80 chấp nhận bốn giá trị khác nhau. ________ 184, ________ 185, ________ 186 và ________ 187. 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 ngang
Giá 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ền
Theo 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
8
1
2
3
4
5
3
Thuộ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
33
Bở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 7
Hì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
80
1
2
3
4
div {
background-color: #b2b2b2;
}
1
Ví dụ hình nền
Trong 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
80
Xin 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
26
Mộ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áo
HTML
1
2
3
4
div {
background-color: #b2b2b2;
}
3 CSS
div {
background-color: #b2b2b2;
}
4
div {
background-color: #b2b2b2;
}
5
Trình diễn hình nền
Xem 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 sau
1
2
3
4
5
8
div {
background-color: #b2b2b2;
}
7
Chú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ôi
Chú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ôi



1
2
3
4
div {
background-color: #b2b2b2;
}
9
Vớ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ôi
Bộ 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úng
div {
background-color: #b2b2b2;
}
4
1
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 đây
1
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ôi
Cụ 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;
}
70
Nó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ày
1
2
3
4
5
4
1
2
3
4
5
5
Chú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;
}
27
Vớ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ày
div {
background-color: #b2b2b2;
}
4
1
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;
}
77
Trong 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ày
1
2
3
4
5
8
1
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;
}
77
Bở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;
}
85
Có 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
03
Cấ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
00
1
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 7
Trang 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 Gradient
Nề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âm
Tiền tố nhà cung cấp nền Gradient
Trong 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ính
Trong 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. Đẹp
1
2
3
4
5
2
1
2
3
4
5
03
Bản trình diễn nền gradient tuyến tính
Xem 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àu
Trướ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àu
Thay đổi hướng của nền dốc
Theo 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 tiếp 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
13
1
2
3
4
5
1
2
3
4
5
05
Bản trình diễn hướng nền gradient tuyến tính
Xem 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 chính xác là hình vuông, 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
17
Nền Gradient xuyên tâm
Mặ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
_______107
Bản trình diễn Nền Radial Gradient
Xem 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àu
Mộ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
09
Bản demo dừng màu gradient
Xem 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
1
Bản demo vị trí dừng màu gradient
Xem 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
24
Ví dụ Nền Gradient
Sử 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ử
HTML______4
div {
background-color: #b2b2b2;
}
3 CSS
1
2
3
4
4
1
2
3
4
5
Bản trình diễn Nền Gradient
Xem 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ày
1
2
3
4
5
1
2
3
4
7
Tiế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ải
Sử dụng hàm 
1
2
3
4
5
07 với các giá trị thích hợp và tiền tố 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 gradient
Cuố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ày
1
2
3
4
8
1
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 trang
Chúng tôi sẽ thay đổi các phần tử ________ 590 này giống như chúng tôi đã làm phần tử ________ 590 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ơn
Mỗ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
60
1
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 sau
1
2
3
4
4
1
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ày
1
2
3
4
5
60
1
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ày
Chú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 sau
1
2
3
4
5
66
1
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 7
Trang 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ồn
Bê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ền
Trong 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
26
Giá 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ền
1
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
80
Ví dụ về nhiều hình nền
Hã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
HTML
1
2
3
4
div {
background-color: #b2b2b2;
}
3 CSS
1
2
3
4
4
1
2
3
4
5
3
Bản trình diễn nhiều hình nền
Xem 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ới
Cù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
76
Thuộ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 phần tử (bên trong đường viền hoặc bên trong phần đệm, ví dụ: 
Kích thước nền CSS3
Thuộ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óa
Khi 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ẽ tự động được đặt để duy trì tỷ lệ khung hình của hình nền
Giá 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
84
1
2
3
4
5
60
1
2
3
4
5
5
Trình diễn kích thước nền CSS3
Xem Kích thước nền CSS3 dành cho bút của Shay Howe (@shayhowe) trên CodePen
Che phủ và chứa các giá trị từ khóa
Ngoài các giá trị thuộc tính chiều dài 
1
2
3
4
5
74, còn có các giá trị từ khóa 
1
2
3
4
5
88 và 
1
2
3
4
5
89 có sẵn cho thuộc tính 
1
2
3
4
5
74
Giá trị từ khóa 
1
2
3
4
5
88 chỉ định rằng hình nền sẽ được thay đổi kích thước để bao phủ hoàn toàn chiều rộng và chiều cao của phần tử. Tỷ lệ khung hình ban đầu của hình nền sẽ được giữ nguyên, tuy nhiên hình ảnh sẽ kéo dài hoặc co lại khi cần thiết để bao phủ toàn bộ phần tử. Thông thường, khi sử dụng giá trị từ khóa 
1
2
3
4
5
88, một phần của hình nền sẽ bị cắt để hình ảnh chiếm toàn bộ không gian có sẵn của phần tử
Mặt khác, giá trị từ khóa 
1
2
3
4
5
89 chỉ định rằng hình nền sẽ được thay đổi kích thước để nằm hoàn toàn trong chiều rộng và chiều cao của phần tử. Khi làm như vậy, tỷ lệ khung hình ban đầu của ảnh nền sẽ được giữ nguyên, nhưng ảnh sẽ kéo dài hoặc co lại khi cần thiết để duy trì trong phạm vi chiều rộng và chiều cao của thành phần. Ngược lại với giá trị từ khóa ________ 088, giá trị từ khóa _____ 089 sẽ luôn hiển thị hình nền đầy đủ; 
Cả hai giá trị từ khóa 
1
2
3
4
5
88 và 
1
2
3
4
5
89 có thể dẫn đến hình ảnh nền bị biến dạng một chút, đặc biệt khi hình ảnh được kéo dài ra ngoài kích thước ban đầu của chúng. Chúng tôi sẽ muốn theo dõi điều này khi sử dụng các giá trị này, để đảm bảo các kiểu kết quả đạt yêu cầu
Clip nền CSS3 và Nguồn gốc nền
Thuộc tính 
1
2
3
4
5
75 chỉ định diện tích bề mặt mà hình nền sẽ bao phủ và thuộc tính 
1
2
3
4
5
76 chỉ định nơi bắt nguồn của 
1
2
3
4
5
81. Việc giới thiệu hai thuộc tính mới này tương ứng với việc giới thiệu ba giá trị từ khóa mới. 
1
2
3
4
5
001, 
1
2
3
4
5
002 và 
1
2
3
4
5
003. Mỗi giá trị trong số ba giá trị này có thể được sử dụng cho các thuộc tính 
1
2
3
4
5
75 và 
1
2
3
4
5
76
1
2
3
4
5
8
1
2
3
4
5
7
Giá trị thuộc tính 
1
2
3
4
5
75 được đặt thành 
1
2
3
4
5
001 theo mặc định, cho phép hình nền mở rộng vào cùng khu vực với bất kỳ đường viền nào. Trong khi đó, giá trị thuộc tính 
1
2
3
4
5
76 được đặt thành 
1
2
3
4
5
002 theo mặc định, cho phép phần đầu của hình nền mở rộng thành phần đệm của phần tử
Hình 7
Giá trị 
1
2
3
4
5
001 mở rộng nền vào đường viền của một phần tử
Hình 7
Giá trị 
1
2
3
4
5
002 mở rộng nền vào phần đệm của một phần tử, nhưng nền được chứa trong bất kỳ đường viền nào
Hình 7
Giá trị 
1
2
3
4
5
003 chứa nền trong đường viền và phần đệm của phần tử
Lần đầu tiên chúng ta thảo luận về các giá trị từ khóa này khi chúng ta đề cập đến thuộc tính 
1
2
3
4
5
013 trong Bài 4, “Mở mô hình hộp. ” Bản thân các giá trị không thay đổi về ý nghĩa, nhưng các chức năng của chúng thay đổi khi sử dụng các thuộc tính nền khác nhau
Tóm lược
Việc thêm nền và chuyển màu vào các trang của chúng tôi cho phép chúng tôi đưa màu sắc lên hàng đầu trong các thiết kế của mình. Các tính năng này cũng giúp xác định cách nhóm nội dung và cải thiện toàn bộ bố cục của các trang của chúng tôi
Để xem lại, bài học này bao gồm những điều sau đây
Cách thêm màu nền và hình ảnh vào phần tử
Độ dốc CSS, cả tuyến tính và xuyên tâm và cách tùy chỉnh chúng
Cách áp dụng nhiều hình nền cho một phần tử
Các thuộc tính CSS3 mới cho phép chúng tôi thay đổi kích thước, diện tích bề mặt và nguồn gốc của hình nền
Việc thêm màu nền, độ dốc và hình ảnh mang lại khá nhiều khả năng để nâng cao thiết kế tổng thể của trang web của chúng tôi. Chúng ta sẽ sớm thảo luận về cách thêm hình ảnh (ngoài hình nền) và các phương tiện khác vào các trang của chúng ta một cách ngữ nghĩa. Nhưng trước đó, hãy xem cách tạo danh sách theo ngữ nghĩa
 

			
Chúng ta có thể thay đổi nền hình ảnh trong CSS không?
			
Thuộc tính CSS có kích thước nền cho phép bạn thay đổi kích thước hình nền của một phần tử , ghi đè hành vi mặc định là xếp hình ảnh ở kích thước đầy đủ bằng cách chỉ định chiều rộng và/hoặc chiều cao . 
		
			
Tôi có thể thay đổi màu nền của hình ảnh không?
			
Thay đổi màu nền của ảnh cực kỳ dễ dàng và nhanh chóng bằng công cụ thay đổi màu nền trực tuyến của Fotor . Chỉ cần nhấp vào nút "Thay đổi màu nền ngay bây giờ" trên trang này. Nhấp vào "Mở ảnh" để tải lên ảnh bạn muốn thay đổi màu nền. Hoặc trực tiếp kéo ảnh vào khu vực chỉnh sửa. 
		
			
Chúng ta có thể thêm màu vào hình ảnh trong CSS không?
			
Cho một hình ảnh và nhiệm vụ là thay đổi màu của hình ảnh bằng CSS.  Sử dụng chức năng lọc để thay đổi màu ảnh png . Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho chức năng lọc.