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;

2016-10-31 mp3por

이 줄은

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

사실에 대한 축약 버전입니다. - documentation 따르면

2016-10-31 16:35:09 andreas

FireFox에만 적용 가능합니까? – Lee

아니요, 그렇지 않습니다. MDN에서 [background-size] (https://developer.mozilla.org/en/docs/Web/CSS/background-size)를 참조하십시오. – andreas

당신이 그것을 분할 글쎄, 당신은 순서대로 다음과 같은 읽기 있다고 볼 수 있습니다 :

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

2016-10-31 16:33:34 Lee

속기 작품 없습니다와 아니오 '/ cover'이 유효하지 않습니다. 배경 크기입니다. – Harry

그것은 흰색 배경이 이미지로 덮여 의미한다 https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg 인 경우 중앙 정렬되며 너비 또는 높이 중 가장 큰 값에 맞게 늘려 비율을 유지합니다.

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

/이 유효 CSS가의 formal syntax on MDN를 참조하십시오

2016-10-31 16:34:53

"또는"가 아닌 - 커버는 너비 ** 및 ** 높이 모두에 맞게 늘어나고 추가로 작물을 만듭니다. – Hogan

cover 스케일링 이미지에 특수 값이다

커버 값은 모두 크기가 보장하면서 작게 가능한 있도록 배경 이미지 크기가되도록 지정 보다 크거나 컨테이너의 해당 크기와 같습니다.

여기에 자신의 sample fiddle

2016-10-31 16:38:15 ochi

답변