Что означает эта линия в CSS?Что означает эта линия в CSS?
#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center/cover
Я пытаюсь понять это. В W3S он говорит следующее о структуре, но я не могу видеть, что «/» и как другие атрибуты соответствуют этой структуре.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Эта линия
background: #ffffff url(...) no-repeat center center/cover;
На самом деле это сокращенная версия для:
background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
/ действительна CSS см formal syntax on MDN.
Ну, если вы разбить его, вы увидите, что он читает следующее по порядку:
background-color | background-image | background-repeat | background-position | background-size
Сокращенные работы и не является '/ cover' не недействителен. Это размер фона. – Harry
Это означает белый фон покрыт этим изображением; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, он выровнен по центру и будет растягиваться в соответствии с шириной или высотой, в зависимости от того, какая из них самая большая, а также ее пропорции.
не "или" - покрытие растягивается, чтобы соответствовать как ширине **, так и ** высоте и дополнительным урожаям. – Hogan
Согласно documentation - cover это специальное значение для масштабирования изображений:
Значение крышка указывает, что фоновое изображение должно быть такого размера, чтобы он как мал, насколько это возможно, обеспечивая при этом, что оба размеры больше или равно соответствующему размеру контейнера.
Здесь нет их sample fiddle
Это применимо только к FireFox? – Lee
Нет, это не так. См. [Background-size] (https://developer.mozilla.org/en/docs/Web/CSS/background-size) в MDN. – andreas