Tính toán CSS cho phần trăm nền hoạt động như thế nào?

Question

Tôi hiện đang chơi xung quanh với gradient và vị trí CSS, tôi loại quản lý để làm những gì tôi muốn nhưng với dự đoán may mắn nhưng tôi muốn hiểu làm thế nào điều này thực sự tất cả các công trình.

Ví dụ, đây là lá cờ Pháp (merci):

.serge_testDraw { 
    width: 10rem; 
    height: 10rem; 
    border: 0.2rem solid black; 
    background-image: 
     linear-gradient(to right, blue 0%, blue 100%) 
     , linear-gradient(to right, white 0%, white 100%) 
     , linear-gradient(to right, red 0%, red 100%) 
    ; 
    background-size: calc(100%/3) 100%; 
    background-repeat: no-repeat; 
    background-position: 0%, 50%, 100%; 
} 

Làm thế nào đến vị trí nền là 0%, 50, 100% thay vì 0, 33,33% (một phần ba), 66,66% (hai thứ ba)?

Ngoài ra, tôi không biết cách định vị nền có kích thước là 100%.

Answer 1

Một giá trị phần trăm cho background-position không vị trí gốc của một hình nền liên quan đến khu vực vị trí nền với. Nó định vị toàn bộ hình ảnh. Điều này có nghĩa là kích thước của chính hình ảnh cũng được tính đến (sau khi thay đổi kích thước với background-size).

Vị trí nền của 100% 100% tương tự như right bottom, định vị hình ảnh sao cho góc dưới cùng bên phải của hình ảnh chạm vào góc dưới cùng bên phải của khu vực nền. Tương tự, 50% 50% tương tự như center center, đặt điểm giữa của hình ảnh ở giữa điểm của vùng nền.

Hãy tưởng tượng trượt một ô hình chữ nhật xung quanh nội thất của một khung hình chữ nhật; di chuyển nó sang bên phải (nghĩa là 100%) có nghĩa là có cạnh phải của nó chạm vào bên phải của khung (vì bạn không thể trượt nó thông qua khung), và di chuyển nó xuống phía dưới có nghĩa là có đáy của nó cạnh chạm vào đáy khung.

Nói chung, đối với bất kỳ background-position: x y trong đó hai giá trị là phần trăm, điểm x của hình ảnh được căn chỉnh với điểm x của khu vực nền và điểm y của hình ảnh được căn chỉnh với điểm y của nền khu vực.

CSS2.1 's mô tả là đau đớn để đọc vì vậy tôi sẽ báo giá CSS3 Backgrounds and Borders thay vào đó, nơi có thậm chí là một ví dụ đồ họa:

Ví dụ, với một cặp giá trị '0% 0%', phía trên góc trái của hình ảnh được căn chỉnh với góc trên bên trái của, thường là cạnh đệm của ô. Cặp giá trị '100% 100%' đặt góc dưới bên phải của hình ảnh ở góc dưới bên phải của khu vực.Với cặp giá trị '75% 50% ', điểm 75% trên và 50% xuống hình ảnh sẽ được đặt ở điểm 75% và 50% xuống khu vực.

Nhưng nếu bạn đang như tôi, và bạn đang khủng khiếp tại mường tượng này trong thời gian thực, sau đó chỉ cần nghĩ đến một câu đố trượt để thay thế.

Lưu ý rằng không có điều nào trong số này áp dụng cho các giá trị tuyệt đối; giá trị tuyệt đối làm vị trí gốc của hình ảnh. Tuy nhiên, điểm tham chiếu có thể được thay đổi nếu bạn neo giá trị tuyệt đối ở bên phải và/hoặc cạnh dưới, ví dụ: right 10px bottom 10px đặt một hình nền cách góc dưới cùng bên phải của khu vực nền 10 pixel.

Nếu bạn muốn định vị hình nền có kích thước bằng 100% diện tích nền, bạn sẽ không thể sử dụng tỷ lệ phần trăm vì bạn không thể di chuyển hình xếp phù hợp với khung hình của nó làm cho một trong những câu đố nhàm chán nhất hoặc trò đùa hoàn hảo). Điều này áp dụng cho dù kích thước nội tại của hình nền phù hợp với kích thước của phần tử hay bạn đã đặt rõ ràng background-size: 100%. Vì vậy, để định vị hình ảnh, bạn sẽ cần phải sử dụng một giá trị tuyệt đối thay thế (hoàn toàn tương tự với câu đố trượt).

Answer 2

Thuộc tính background-position đặt vị trí của trung tâm của nền. Bạn đã xác định rằng tất cả các nền đều có chiều rộng là calc(100%/3) và chiều cao là 100%, khi đó bạn đã chỉ định vị trí x cho tâm của từng nền trong ba (vị trí y mặc định là 50%).

Answer 3

Giống như Woodrow nói vì quy tắc nền của bạn sẽ áp dụng cho mỗi nền, mỗi nền sẽ chiếm một phần ba lá cờ của bạn để 0% đó là điểm bắt đầu cho nền đầu tiên.

Thứ hai sẽ lấy lại lần thứ ba nhưng dễ hiểu hơn khi nghĩ rằng 50% trung tâm hơn 50% đây là lý do tại sao anh ta ở giữa và chiếm 1/3 số container. Bạn có thể sử dụng trung tâm thay vì 50% nếu muốn.

Dưới đây là mozilla's doc about background-position