Dòng này có ý nghĩa gì trong CSS?

Question

Dòng này có ý nghĩa gì trong CSS?

#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center/cover 

Tôi đang cố gắng tìm hiểu. Trong W3S nó nói sau đây về cấu trúc nhưng tôi không thể có vẻ để xem những gì '/' và làm thế nào để các thuộc tính khác phù hợp với cấu trúc này.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; 

Answer 1

này dòng

background: #ffffff url(...) no-repeat center center/cover; 

Trên thực tế là phiên bản viết tắt cho:

background-color: #ffffff; 
background-image: url(...); 
background-repeat: no-repeat; 
background-position: center center; 
background-size: cover; 

Các / là CSS hợp lệ, vui lòng xem formal syntax on MDN.

Answer 2

Vâng, nếu bạn chia nó lên, bạn sẽ thấy rằng nó đang đọc những điều sau theo thứ tự:

background-color | background-image | background-repeat | background-position | background-size

Answer 3

Nó có nghĩa là một nền trắng được bao phủ bởi hình ảnh này; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, nó được căn giữa và sẽ kéo dài để vừa với chiều rộng hoặc chiều cao, tùy theo mức nào lớn nhất, đồng thời duy trì tỷ lệ của nó.

Answer 4

Theo documentation-cover là một giá trị đặc biệt đối với nhân rộng hình ảnh:

Giá trị bìa xác định rằng hình nền nên có kích thước sao cho nó là như nhỏ càng tốt đồng thời đảm bảo rằng cả hai kích thước là lớn hơn hoặc bằng kích thước tương ứng của vùng chứa.

Đây là công trình Shorthand sample fiddle