programing

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

stoneblock 2023. 8. 7. 22:17

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

다음을 사용하여 배경색을 지정하는 것과 다른 점은 무엇입니까?background그리고.background-color?

스니펫 #1

body { background-color: blue; }

스니펫 #2

body { background: blue; }

그것들이 두 개의 별개의 속성이라고 가정하면, 당신의 구체적인 예에서는 결과에 차이가 없습니다, 왜냐하면 실제로는 의 줄임말이기 때문입니다.

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

따라서, 이외에, 를 사용합니다.background는 다른 하나 도 있습니다.background-*두 번 이상의 재산.

어떤 예에, 스타선특의정있수습니다따조는우경하달야도재해의에건라정질라언일다떤을를음들어을택으용자본적할지는예▁just▁the▁you▁which).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 성능 정보:

background vs :

한 페이지에 작은 직사각형으로 100번 렌더링된 18가지 색상 비교, 한 번은 배경색으로, 한 번은 배경색으로.

Background vs background-color

이러한 숫자는 단일 페이지 다시 로드에서 나온 것이지만, 이후 새로 고침을 통해 렌더링 시간이 변경되었지만, 백분율 차이는 기본적으로 매번 동일합니다.

이는 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-color
  • background-image
  • background-repeat
  • background-position
    기타.

와 함께background-color.

background: url(example.jpg) no-repeat center center #fff;

대.

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: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 배경 속성은 요소의 배경 효과를 정의하는 데 사용됩니다.

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

  • 배경색의
  • 배경 이미지
  • 배경 조사의
  • 백그라운드 평가
  • 배경 위치

백그라운드 속성은 이 모든 속성을 포함하며 한 줄로 작성하면 됩니다.

둘 다 똑같아요. 개의 배경 여개배선예택기경의러예(기:)가 .background-color,background-image,background-position더▁the▁▁them▁through다▁)를 통해 접근할 수 .background선택기 또는 더 구체적인 선택기.예:

background: blue url(/myImage.jpg) no-repeat;

또는

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

.background속기 속성은 여러 가지 배경 관련 속성을 설정합니다.들어 값만 값으로 예를 들어 색 값 만 지 해 설 값 기 때 되 속 설 이 정 됩 니 성 다 모 든 에 문 정 로 초 으 기 상 속 다background-imagenone.

그렇다고 해서 이러한 속성에 대한 다른 설정이 항상 재정의되는 것은 아닙니다.이는 일반적으로 잘못 이해된 규칙에 따라 캐스케이드에 따라 달라집니다.

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

한 페이지에 작은 직사각형으로 100번 렌더링된 18가지 색상 비교, 한 번은 배경색으로, 한 번은 배경색으로.

저는 CSS 성능 실험을 재현했고, 요즘은 결과가 많이 다릅니다.

background

크롬 54: 443 (µs/div)

Firefox 49: 162(svs/div)

에지 10: 56(µs/div)

background-color

크롬 54: 449(µs/div)

Firefox 49: 171(svs/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

속성 값 중 하나가 누락되어도 다른 값이 이 순서에 있으면 상관 없습니다.

이것이 가장 좋은 대답입니다.속기(배경)는 재설정 및 DRY(긴 손과 결합)를 위한 것입니다.

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 // 마스크 이미지 블록("맨 위 항목, 텍스트 또는 이미지")을 무시할 수 있으므로 디자인에서 안전하게 사용하기 위해 배경 색상을 항상 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color

'programing' 카테고리의 다른 글

MySQL에서 10진수로 캐스트  (0) 2023.08.07
잘못된 키 해시를 가진 Android Facebook 통합  (0) 2023.08.07
각도 - 구성이 작업 공간에서 설정되지 않았습니다.  (0) 2023.08.07
Visual Studio Code + Spring Boot Project 변경 spring.properties.추가 위치 등  (0) 2023.08.07
C++에서 문자열 스트림에서 문자열로 변환하려면 어떻게 해야 합니까?  (0) 2023.08.02

'programing'의 다른글

  • 현재글배경색과 배경색의 차이점은 무엇입니까?

관련글

댓글

티스토리툴바