배경색과 배경색의 차이점은 무엇입니까

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:

한 번의 배경 에서 한 번 및 background-color 에서 한 번 작은 페이지로 100 회 렌더링 된 18 개의 색상 견본 비교 .

이 숫자는 단일 페이지 재로드에서 온 것이지만 이후 새로 고침으로 렌더링 시간이 변경되었지만 백분율 차이는 기본적으로 매번 동일했습니다.

거의 42.6ms 절약, 거의 두 배 빠른 속도Safari 7.0.1에서 배경색 대신 배경을 사용할 때 됩니다. 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-color
• background-image
  
• background-repeat
  
• background-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/

둘 다 동일합니다. 여러 개의 배경 선택기 (예 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 .

그렇다고해서 해당 속성의 다른 설정이 항상 무시되는 것은 아닙니다. 이것은 일반적으로 잘못 이해되는 규칙에 따라 계단식으로 구성됩니다.

실제로, 속기는 다소 안전합니다. 다른 스타일 시트에서 배경 이미지와 같은 예기치 않은 배경 속성을 실수로 얻는 것에 대한 예방책입니다 (완전하지는 않지만 유용합니다). 게다가 더 짧습니다. 그러나 실제로 "모든 배경 속성 설정"을 의미한다는 것을 기억해야합니다.

다른 점이 없다. 둘 다 같은 방식으로 작동합니다.

CSS 배경 속성은 요소의 배경 효과를 정의하는 데 사용됩니다.

배경 효과에 사용되는 CSS 속성 :

• 배경색
• 배경 이미지
• 배경 반복
• 배경 첨부
• 배경 위치

배경 속성에는이 속성이 모두 포함되어 있으며 한 줄로 작성하면됩니다.

이것이 가장 좋은 대답입니다. 숏 핸드 (백그라운드)는 재설정 및 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

다른 값이이 순서에있는 한 속성 값 중 하나가 누락 되어도 문제가되지 않습니다.

배경색으로는 그라디언트를 설정할 수 없습니다.

이것은 작동합니다 :

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));

background 다음에 대한 속기 속성입니다.

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

당신은 여기 에 모든 속성에 대한 자세한 정보를 얻을 수 있습니다

속성 순서

대부분의 브라우저 구현에서 (구형 브라우저가 문제를 일으킬 수 있다고 생각합니다) 다음을 제외하고 속성의 순서는 중요하지 않습니다.

• background-origin그리고 background-clip:이 두 속성이 모두 존재하는 경우, 첫 번째 속성을 참조 -origin하고 두 번째 속성을 참조하십시오 -clip.

  예:

  background: content-box green padding-box;

  다음과 같습니다.

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-size항상 따라야 background-position하며 속성은/

• 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: url("image.png")

이미지를 찾을 수 없으면 위와 같은 짧은 손을 사용하는 것처럼 무시되지 않고 302 코드를 보냅니다.

background-image: url("image.png") 

배경색과 배경색에 관한 버그가 있습니다

배경을 사용할 때, 때로는 CSS 배경으로 웹 페이지를 만들 때의 차이점 : #fff // 마스크 이미지 블록 ( "상단 항목, 텍스트 또는 이미지")을 초과 할 수 있으므로 항상 배경을 사용하는 것이 좋습니다 개인의 디자인에 안전한 사용을위한 색상