Những gì tôi nghĩ sẽ là một nhiệm vụ đơn giản đã đưa tôi xuống hố sâu khi học 8 thuộc tính
background-image: url["image.png"];
0 khác nhau. Tôi đã mất hàng giờ để tìm ra tất cả những gì họ đã làm và cách họ tương tácBây giờ, tôi muốn dạy cho bạn mọi thứ bạn cần biết về CSS nền. Trong vài phút thay vì giờ
🎨 Màu sắcTài sản.
background-image: url["image.png"];
1 Giá trị mặc định. background-image: url["image.png"];
2Thuộc tính nền được sử dụng phổ biến nhất. Nó cho phép chúng ta thay đổi màu nền của một phần tử
Màu có thể được chỉ định bằng ký hiệu rgb, hsl hoặc hex
/* Without Transparency */
background-color: rgb[0,0,0];
background-color: hsl[0,0%,0%];
background-color: #000000;
/* With Transparency */
background-color: rgba[0,0,0,1];
background-color: hsla[0,0%,0%,1];
background-color: #000000ff;
Bạn cũng có thể sử dụng một trong 140 màu được xác định trước hoặc từ khóa
background-image: url["image.png"];
2📷 Hình ảnhTài sản.
background-image: url["image.png"];
4 Giá trị mặc định. background-image: url["image.png"];
5Ngôi sao của chương trình. Hầu như tất cả các thuộc tính nền khác sửa đổi nó theo một cách nào đó
Nó cho phép chúng ta đặt một hình ảnh làm nền của phần tử
Để làm điều đó, hãy sử dụng hàm
background-image: url["image.png"];
0 với một URL tương đối hoặc tuyệt đối làm tham số của nó. URL phải được đặt trong dấu ngoặc kép background-image: url["image.png"];
1 hoặc dấu nháy đơn background-image: url["image.png"];
2GHI CHÚ. Khi bạn chọn sử dụng một URL tương đối, hãy nhớ rằng nó liên quan đến biểu định kiểu chứ không phải trang web
background-image: url["image.png"];
Nhưng tại sao chúng ta không thể viết URL mà không có một số chức năng ưa thích? . Ví dụ. Độ dốc
background-image: linear-gradient[red,yellow];
Vâng, độ dốc là hình ảnh trong CSS. Nếu bạn thấy điều này khó nhớ như tôi, hãy sử dụng tốc ký nền. Nó ghi nhớ cho bạn 😄
Nói lạiTài sản.
background-image: url["image.png"];
3 Giá trị mặc định. background-image: url["image.png"];
4background-image: url["image.png"];
3 xác định điều gì sẽ xảy ra, nếu hình ảnh nhỏ hơn phần tử mà nó dùng làm nền choCác giá trị có thể có của
background-image: url["image.png"];
3 được hiển thị tốt hơn so với thông báoTài sản.
background-image: url["image.png"];
7 Giá trị mặc định. background-image: url["image.png"];
8Thuộc tính này kiểm soát kích thước của hình nền. Hầu hết thời gian nó được sử dụng với một trong hai từ khóa
9 - Nó lấp đầy [bao phủ] toàn bộ khu vực của phần tử bằng hình ảnh mà không kéo dài. Ngay cả khi điều đó có nghĩa là các phần của hình ảnh sẽ không hiển thịbackground-image: url["image.png"];
0 - Ngược lại vớibackground-image: linear-gradient[red,yellow];
9. Nó đảm bảo rằng toàn bộ hình ảnh vừa vặn [được chứa] trong phần tử mà không bị nénbackground-image: url["image.png"];
Trừ khi
background-image: url["image.png"];
7 được đặt thành background-image: linear-gradient[red,yellow];
3, việc đặt background-image: linear-gradient[red,yellow];
4 sẽ dẫn đến hình ảnh xếp chồngGiá trị của
background-image: url["image.png"];
7 cũng có thể là phần trăm hoặc độ dài [background-image: linear-gradient[red,yellow];
6,background-image: linear-gradient[red,yellow];
7,background-image: linear-gradient[red,yellow];
8, v.v. ]Giá trị phần trăm có liên quan đến kích thước của phần tử hoặc cụ thể hơn là khu vực được chỉ định bởi
background-image: linear-gradient[red,yellow];
9. Thông tin thêm về tài sản đó saubackground-image: url["image.png"];
7 có thể được đặt bằng cú pháp một giá trị hoặc hai giá trị- Khi chỉ có một giá trị được cung cấp, giá trị này sẽ đặt chiều rộng của hình ảnh. Chiều cao được đặt tự động để duy trì tỷ lệ
- Khi hai giá trị được cung cấp, giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao
Khi sử dụng hai giá trị, hình ảnh có thể bị kéo dài. Để tránh kéo dài, hãy đặt một giá trị bằng cách sử dụng độ dài/phần trăm và giá trị còn lại bằng cách sử dụng từ khóa
background-image: url["image.png"];
41Hình ảnh 250 x 125 trong hộp 300 x 300. Các phần bán trong suốt thể hiện hình ảnh ốp lát với nền lặp lại. nói lại
Chức vụTài sản.
background-image: url["image.png"];
42 Giá trị mặc định. background-image: url["image.png"];
43Có thể bạn đã nhận thấy rằng khi chúng tôi thay đổi kích thước của một phần tử, phần tử đó vẫn được dán vào góc trên cùng bên trái. Chúng ta có thể thay đổi điều đó bằng cách sử dụng
background-image: url["image.png"];
42Có bốn từ khóa chúng ta có thể sử dụng. ________ 245, ________ 246, ________ 247 và ________ 248. Cũng như bất kỳ giá trị độ dài hoặc tỷ lệ phần trăm nào
Giống như
background-image: url["image.png"];
7, chúng ta có thể sử dụng cú pháp một giá trị hoặc hai giá trị- Khi sử dụng một giá trị, giá trị này sẽ đặt vị trí nằm ngang [trục x] của hình ảnh. Vị trí dọc [trục y] mặc định là 50%
- Khi sử dụng hai giá trị, giá trị đầu tiên đặt vị trí nằm ngang và giá trị thứ hai. theo chiều dọc
GHI CHÚ. Các giá trị độ dài đặt khoảng cách từ góc trên cùng bên trái của hình ảnh đến góc trên cùng bên trái của phần tử. Giá trị phần trăm và từ khóa đặt vị trí của điểm giữa của hình ảnh trên một trục nhất định
Kết hợp
background-image: url["image.png"];
00 với background-image: url["image.png"];
01 hoặc background-image: linear-gradient[red,yellow];
0 là một cách dễ dàng để đạt được hình ảnh phản hồi, tỷ lệ phù hợp với phần tử và trangTài sản.
background-image: url["image.png"];
03 Giá trị mặc định. background-image: url["image.png"];
04background-image: url["image.png"];
03 cho phép bạn kiểm soát cách hình nền của bạn phản ứng với việc cuộngiá trị có thể là
04 - Cuộn theo trang nhưng không cuộn theo nội dung của phần tửbackground-image: url["image.png"];
07 - Đã sửa lỗi cho khung nhìn. Hoạt động như một cửa sổ cho một cái gì đó đằng sau trangbackground-image: url["image.png"];
08 - Cuộn với trang và nội dung của phần tửbackground-image: url["image.png"];
Nếu bạn bối rối vì điều đó, đừng lo lắng. Thật khó hiểu nếu không có ví dụ. Chơi xung quanh với bản demo bên dưới cho đến khi bạn hiểu rõ hơn về cách thức hoạt động của thuộc tính này
Xem Ví dụ về tệp đính kèm nền bút của Ematte [@ematte] trên CodePen. Nguồn gốcTài sản.
background-image: linear-gradient[red,yellow];
9 Giá trị mặc định. background-image: url["image.png"];
10Thuộc tính này đặt nguồn gốc của nền. Nó sử dụng ba từ khóa
11 - Nền bắt đầu từ mép ngoài của đường viền. Nó nằm bên dưới nó, bạn có thể thấy nếu đường viền là bán trong suốt,background-image: url["image.png"];
12 hoặcbackground-image: url["image.png"];
13background-image: url["image.png"];
10 - Nền bắt đầu từ mép trong của đường viềnbackground-image: url["image.png"];
15 - Nền bắt đầu từ nơi nội dung của phần tử xuất hiệnbackground-image: url["image.png"];
Ví dụ này giả sử lặp lại nền. không lặp lại;
Cả
background-image: url["image.png"];
42 và background-image: url["image.png"];
7 đều liên quan đến hộp được đặt bởi thuộc tính nàyKẹpTài sản.
background-image: url["image.png"];
18 Giá trị mặc định. background-image: url["image.png"];
11Mặc dù
background-image: url["image.png"];
18 chia sẻ hầu hết các giá trị của nó với background-image: linear-gradient[red,yellow];
9 và kết quả của chúng có thể trông giống nhau, nhưng chúng thực sự khá khác nhauThuộc tính này không sửa đổi vị trí của nền theo bất kỳ cách nào
Nó cắt nền vào hộp đã chọn. Điều này có nghĩa là bất kỳ phần nào của nền bên ngoài khu vực do thuộc tính này đặt sẽ không hiển thị
11 - Nền được cắt bớt vào mép ngoài của đường viền. Nó sẽ hiển thị dưới đường viền, phần đệm và nội dungbackground-image: url["image.png"];
10 - Nền được cắt bớt vào mép trong của đường viền. Nó sẽ hiển thị dưới phần đệm và nội dungbackground-image: url["image.png"];
15 - Nền được cắt bớt vào khu vực nội dung. Nó sẽ chỉ hiển thị dưới nội dung của phần tửbackground-image: url["image.png"];
25 - Nền sẽ chỉ hiển thị dưới nội dung văn bản của phần tử. Đảm bảo đặtbackground-image: url["image.png"];
26 để xem nền. Điều này có thể được sử dụng để đạt được một số hiệu ứng thú vị như văn bản chuyển màubackground-image: url["image.png"];
lớpGHI CHÚ. Nếu khu vực được thiết lập bởi
18 nhỏ hơn khu vực được thiết lập bởibackground-image: url["image.png"];
9, các phần bên ngoài của hình ảnh sẽ bị cắt. Hãy chắc chắn rằng không có gì quan trọng ở đóbackground-image: linear-gradient[red,yellow];
Tất cả các thuộc tính nền, ngoại trừ
background-image: url["image.png"];
1 chấp nhận nhiều giá trị, được phân tách bằng dấu phẩy. Đó là bởi vì mỗi phần tử có thể có nhiều lớp nềnbackground-image: url["image.png"];
4Giá trị đầu tiên [ngoài cùng bên trái] tương ứng với lớp trên cùng. Giá trị cuối cùng [ngoài cùng bên phải], là lớp dưới cùng
Nhưng việc quản lý các lớp trên nhiều thuộc tính có thể trở nên lộn xộn khá nhanh. Ví dụ. Điều gì sẽ xảy ra nếu bạn quyết định thêm một lớp hình ảnh khác ở trên cùng của ngăn xếp lớp nhưng lại quên cập nhật các thuộc tính
background-image: url["image.png"];
20 khác?Vấn đề này có thể được ngăn chặn bằng cách sử dụng tốc ký nền
Tôi hy vọng phần giới thiệu này làm cho chủ đề này dễ hiểu hơn và có thể dùng làm tài liệu tham khảo nếu bạn cần ôn lại