배경색과 배경색의 차이점은 무엇입니까
background와 background-color?를 사용하여 배경색을 지정하는 것의 차이점은 무엇입니까 ?
스 니펫 # 1
body { background-color: blue; }
스 니펫 # 2
body { background: blue; }
그것들이 두 가지 별개의 속성이라고 가정하면, 구체적인 예에서는 background실제로는 속기 때문에 결과에 차이가 없습니다.
배경색
배경 이미지
배경 위치
배경 반복
배경 첨부 파일
배경 클립
배경 출처
배경 크기
따라서 바로 가기를 background-color사용하여 background다른 background-*속성을 두 번 이상 반복하지 않고 하나 이상의 값을 추가 할 수도 있습니다 .
선택하는 것은 본질적으로 당신에게 달려 있지만 스타일 선언의 특정 조건에 따라 달라질 수 있습니다 (예 : 부모 요소에서 background-color다른 관련 background-*속성을 상속 할 때만 재정의해야 하거나 모든 값을 제거 해야하는 경우) 제외 background-color).
background이전의 모든 대체할만한 것 background-color, background-image등 사양. 기본적으로 축약 형이지만 재설정 도 가능합니다.
때로는 background템플릿 사용자 정의에서 이전 사양 을 덮어 쓸 때 사용 하여 다음을 원할 것입니다.
background: white url(images/image1.jpg) top left repeat;
다음과 같습니다.
background: black;
따라서, 모든 매개 변수 ( background-image, background-position, background-repeat) 기본값으로 재설정됩니다.
CSS 성능 정보 :
backgroundvs background-color:
18 개 색상 견본의 비교에 한 번, 작은 직사각형으로 한 페이지에 100 번 렌더링 된 배경 과 한 번 배경 색상 .
이 숫자는 단일 페이지를 다시로드하는 동안 발생하지만 이후 새로 고침으로 렌더링 시간이 변경되었지만 백분율 차이는 기본적으로 매번 동일했습니다.
Safari 7.0.1에서 배경색 대신 배경을 사용할 때 거의 42.6ms, 거의 두 배의 속도가 절약 됩니다. Chrome 33은 거의 같은 것으로 보입니다.
이것은 두 가지 이유로 가장 오랜 시간 동안 나를 솔직하게 날려 버렸습니다.
- 나는 일반적으로 CSS 속성, 특히 배경에서 명시 성을 주장합니다.
- 브라우저에서 볼
background: #000;때 실제로 볼 것이라고 생각했습니다background: #000 none no-repeat top center;. 여기에 리소스에 대한 링크가 없지만 어딘가에서 이것을 읽은 것을 기억합니다.
참조 : https://github.com/mdo/css-perf#background-vs-background-color
로 background모두 설정할 수있는 background속성을 같은 :
background-colorbackground-image
background-repeatbackground-position
기타
함께 background-color하면 바로 배경의 색상을 지정할 수 있습니다
background: url(example.jpg) no-repeat center center #fff;
VS.
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
더 많은 정보
(자막 : 배경-속기 속성 참조)
차이점 중 하나 :
이런 식으로 이미지를 배경으로 사용하는 경우 :
background: url('Image Path') no-repeat;
"background-color"속성으로 재정의 할 수 없습니다.
그러나 배경을 사용하여 색상을 적용하는 경우 배경색과 동일하며 무시할 수 있습니다.
예 : http://jsfiddle.net/Z57Za/11/ 및 http://jsfiddle.net/Z57Za/12/
다른 점이 없다. 둘 다 같은 방식으로 작동합니다.
CSS 배경 속성은 요소의 배경 효과를 정의하는 데 사용됩니다.
배경 효과에 사용되는 CSS 속성 :
- 배경색
- 배경 이미지
- 배경 반복
- 배경 첨부
- 배경 위치
배경 속성에는이 속성이 모두 포함되어 있으며 한 줄로 작성하면됩니다.
둘 다 동일합니다. 백그라운드 선택기 (예 background-color: background-image, background-position) 가 여러 개 있으며 더 간단한 background선택기 또는보다 구체적인 선택기 를 통해 액세스 할 수 있습니다 . 예를 들면 다음과 같습니다.
background: blue url(/myImage.jpg) no-repeat;
또는
background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
차이점은 background속기 속성이 여러 배경 관련 속성을 설정 한다는 것 입니다. 예를 들어 색상 값만 지정하더라도 다른 속성은 초기 값 (예 :) background-image으로 설정되므로 모두 설정 합니다 none.
그렇다고해서 해당 속성에 대한 다른 설정이 항상 무시되는 것은 아닙니다. 이것은 일반적으로 잘못 이해되는 규칙에 따라 계단식으로 구성됩니다.
실제로, 속기는 다소 안전합니다. 다른 스타일 시트에서 배경 이미지와 같은 예기치 않은 배경 속성을 실수로 얻는 것에 대한 예방책입니다 (완전하지는 않지만 유용합니다). 게다가 더 짧습니다. 그러나 실제로 "모든 배경 속성 설정"을 의미한다는 것을 기억해야합니다.
이것이 가장 좋은 대답입니다. 숏 핸드 (백그라운드)는 재설정 및 DRY (롱 핸드와 결합)입니다.
한 번의 배경으로 한 번, 배경색으로 한 번 작은 페이지로 100 회 렌더링 된 18 개의 색상 견본 비교.
CSS 성능 실험을 다시 만들었으며 요즘 결과는 크게 다릅니다.
background
크롬 54 : 443 (µs / div)
Firefox 49 : 162 (µs / div)
에지 10:56 (µs / div)
background-color
크롬 54 : 449 (µs / div)
Firefox 49 : 171 (µs / div)
에지 10:58 (µs / div)
보시다시피 거의 차이가 없습니다.
background다음 background-color과 같은 배경 관련 항목에 대한 바로 가기입니다 .
background-color
background-image
background-repeat
background-attachment
background-position
W3C에서 아래 내용을 읽으십시오.
배경-속기 속성
코드를 단축하기 위해 하나의 단일 속성에 모든 배경 속성을 지정할 수도 있습니다. 이것을 속기 속성이라고합니다.배경의 속기 속성은 배경입니다.
body {
background: white url("img_tree.png") no-repeat right top;
}
속기 속성을 사용하는 경우 속성 값의 순서는 다음과 같습니다.
background-color background-image background-repeat background-attachment background-position다른 값이이 순서에있는 한 속성 값 중 하나가 누락 되어도 문제가되지 않습니다.
Outlook 용 이메일을 생성 할 때 알아 차 렸습니다 ...
/*works*/
background: gray;
/*does not work*/
background-color: gray;
상속을 가지고 게임을 할 수 있다는 것을 이해하면 아주 깔끔한 일을 할 수 있습니다. 그러나 먼저이 문서의 배경을 이해하십시오 .
CSS3를 사용하면 여러 배경을 요소에 적용 할 수 있습니다. 이들은 맨 위에 제공 한 첫 번째 배경과 뒷면에 나열된 마지막 배경으로 서로 겹쳐 있습니다. 마지막 배경 만 배경색을 포함 할 수 있습니다.
그래서 할 때 :
background: red;
빨간색이 마지막으로 나열된 값이므로 배경색을 빨간색으로 설정하고 있습니다.
할 때 :
background: linear-gradient(to right, grey 50%, yellow 2%) red;
빨간색이 다시 배경색 이지만 그래디언트가 표시됩니다.
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background: inherit;
} <div class="box">
</div>이제 배경색과 같은 것 :
.box{
border-radius: 50%;
width: 200px;
height: 200px;
background: linear-gradient(to right, grey 50%, yellow 2%) red;
}
.box::before{
content: "";
display: block;
margin-left: 50%;
height: 50%;
border-radius: 0 100% 100% 0 / 50%;
transform: translateX(70px) translateY(-26px) rotate(325deg);
background-color: inherit;
} <div class="box">
</div>이것이 일어나는 이유는 우리가 이것을 할 때입니다.
background: linear-gradient(to right, grey 50%, yellow 2%) #red;
마지막 숫자는 배경색을 설정합니다.
그런 다음 이전에 배경 (그라디언트를 얻음) 또는 배경색에서 상속하면 빨간색이됩니다.
배경색으로는 그라디언트를 설정할 수 없습니다.
이것은 작동합니다 :
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
이것은하지 않습니다 :
background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));
배경색과 배경색에 관한 버그가 있습니다
배경을 사용할 때, 때로는 CSS 배경으로 웹 페이지를 만들 때의 차이점 : #fff // 마스크 이미지 블록 ( "상단 항목, 텍스트 또는 이미지")을 오버로드 할 수 있으므로 항상 배경을 사용하는 것이 좋습니다. 개인의 디자인에 안전한 사용을위한 색상
내가 문서에서 볼 수없는 것을 발견 한 것은 background: url("image.png")
이미지가 발견되지 않으면 위와 같이 짧은 손을 사용하는 것처럼 무시되지 않고 302 코드를 보냅니다.
background-image: url("image.png")
'Programing' 카테고리의 다른 글
| 해시 된 비밀번호 필드에 사용할 데이터 유형 및 길이는 무엇입니까? (0) | 2020.04.01 |
|---|---|
| process.cwd ()와 __dirname의 차이점은 무엇입니까? (0) | 2020.04.01 |
| 코드를 대문자 또는 소문자로 변환하는 Intellij 단축키? (0) | 2020.04.01 |
| .min 파일을 포함하지 않는 번 들러 (0) | 2020.03.31 |
| 2D float numpy array를 2D int numpy array로 변환하는 방법은 무엇입니까? (0) | 2020.03.31 |