속기 배경 속성에 배경 표지 값을 포함하는 방법

속기 배경 속성에 배경 표지 값을 포함하는 방법은 무엇입니까?

---

<div>너비와 높이의 전체 범위로 늘어나도록 배경 이미지를 설정하려고합니다 . 은 <div>내가 사용하고 있으므로, 가변 크기의 것background-size: cover;

background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;

이 속기 표기법에 배치하는 방법을 알아 내지 못해 작동하게합니다. 각 속성을 독립적으로 나열하면 제대로 작동하지만 올인원 솔루션을 원했습니다.

이것은 작동하지만 선호되지 않습니다.

background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');

---

W3 및 MDN 에 따르면 배경 위치에서 배경 크기를 구분하는 슬래시가 있어야합니다.

W3C 예 :

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; } 

MDN :

이 속성은 '/'문자로 구분 된 배경 위치 뒤에 지정해야합니다.

Opera에는 배경 속기에 대한 몇 가지 정보도 있습니다.

http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html

---

W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference 에서 좋은 질문입니다 .

따라서 축약 형 구문에 background-size 값을 포함하려면 다음을 수행해야합니다.

• 기본값과 동일하더라도 배경 위치 값을 명시 적으로 포함 배경 크기 값 앞에 배경 위치 값을 씁니다. 이 두 쌍의 값 사이에 슬래시를 넣으십시오.

그래서 당신은 이렇게하고 싶을 것입니다

background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left / cover no-repeat;

여기에서 바이올린 참조

http://jsfiddle.net/8Up6V/

---

다음은 작동 할 asker의 매개 변수를 사용하는 예입니다. 다른 답변 중 일부는 매개 변수를 약간 복잡하게 만들었습니다. 필요한 모든 것은 슬래시로 background-size에서 분리해야합니다 .background-position/

 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;

---

(다중) 배경 속기 의 구문 은 다음과 같습니다.

배경 : [<bg-layer>,] * <final-bg-layer>

어디

<bg-layer> = <bg- 이미지> || <위치> [/ <bg-size>]? || <반복 스타일> || <첨부 파일> || <상자> || <상자>

<final-bg-layer> = <bg-image> || <위치> [/ <bg-size>]? || <반복 스타일> || <첨부 파일> || <상자> || <상자> || < '배경색'>

... 하나의 <box> 값이 있으면 'background-origin'과 'background-clip'을 모두 해당 값으로 설정합니다. 두 개의 값이있는 경우 첫 번째는 'background-origin'과 두 번째 'background-clip'을 설정합니다.

• 이중 막대 (||)는 두 개 이상의 옵션을 구분합니다. 하나 이상의 옵션이 순서에 상관없이 나타나야합니다.
• 별표 (*)는 선행 유형, 단어 또는 그룹이 0 회 이상 발생 함을 나타냅니다.
• 물음표 (?)는 선행 유형, 단어 또는 그룹이 선택 사항임을 나타냅니다.

의 순서가 포함 그래서 background-size, 당신은 해야한다 를 지정 background-position그것은 이전과 장소 /에-사이를.

---

왼쪽 상단 대신 중앙에서 이미지를 자르고 싶다고 가정하면 다음과 같이 작성합니다.

background: url(...) center / cover;

아래의 네 가지 예는 모두 동일한 이미지를 사용합니다.

h1 {
  font: medium monospace;
}
.test {
  display: inline-block;
}
.test-landscape {
  width: 200px;
  height: 150px;
}
.test-portrait {
  width: 150px;
  height: 200px;
}
.test-lefttop {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) left top / cover;
}
.test-center {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) center / cover;
}

<h1>background-position: left top<h1>
<div class="test test-landscape test-lefttop"></div>
<div class="test test-portrait  test-lefttop"></div>

<h1>background-position: center</h1>
<div class="test test-landscape test-center"></div>
<div class="test test-portrait  test-center"></div>

참조 URL : https://stackoverflow.com/questions/17093252/how-to-include-the-background-cover-value-in-the-shorthand-background-property