Co oznacza ta linia w CSS?Co oznacza ta linia w CSS?
#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center/cover
Próbuję to rozgryźć. W W3S jest napisane o strukturze, ale nie mogę zobaczyć, co "/" i jak inne atrybuty pasują do tej struktury.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Linia ta
background: #ffffff url(...) no-repeat center center/cover;
Właściwie jest skróconą wersją dla:
background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/ Poprawny CSS, zobacz formal syntax on MDN.
Dobrze, jeśli podzielić ją w górę, zobaczysz, że czyta w tej kolejności:
background-color | background-image | background-repeat | background-position | background-size
prace Skrócone i NIE '/ cover' nie jest nieprawidłowy. Jest to wielkość tła. – Harry
oznacza to białe tło jest objęty tym obrazie; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, jest centralnie wyrównany i rozciągnie się do szerokości lub wysokości, w zależności od tego, która wartość jest większa, przy jednoczesnym zachowaniu proporcji.
nie "lub" - obejmuje rozciągnięcia, aby dopasować zarówno szerokość **, jak i ** wysokość oraz dodatkowe zbiory. – Hogan
Według documentation - cover jest specjalną wartość dla skalowania obrazów:
Wartość pokrywa określa, że obraz tła powinny być dobrane tak, że jest jak małe jak to możliwe, przy jednoczesnym zapewnieniu, że oba wymiary są większa niż lub równa rozmiarowi kontenera.
Oto ich sample fiddle
Czy dotyczy to tylko FireFox? – Lee
Nie, nie jest. Zobacz [background-size] (https://developer.mozilla.org/en/docs/Web/CSS/background-size) na MDN. – andreas