CSS에서 그림(background) 설정에 대한 소감 요약

1935 단어 CSS
css2에서 background에 대한 속성은 다음과 같습니다.
  • background-color: 배경을 채우는 색을 지정합니다. 그림을 인용하지 않고 순수한 배경만 사용할 수 있습니다. 이 경우 직접 사용할 수 있습니다
  • background:#eee;
  • background-image: 그림을 배경으로 인용한다. 예를 들어
    backgroud-image:url("img/bg.jpg");
  • background-position: 원소 배경 그림의 위치를 지정한다. 이것은 많은 사람들이 익숙하지 않지만 꽤 쓸모가 있다. 실제 그림의 왼쪽 상단은 원소의 왼쪽 상단에 대응하고 있다. 픽셀로 위치를 정할 때 사용할 수 있다.
    background-position: 0 0;//       x     ,       y     
    background-position: 0 100px;
                     ,         , 
    background-position: top right; //    top     top    right     right
    background-position:  100% 50%; //                ,    
  • background-repeat: 배경 그림을 중복할지 여부를 결정하는데 다음과 같은 몇 가지가 있다.
     background-repeat: repeat;       //     
     background-repeat: no-repeat ; //      
     background-repeat: repeat-x;    //   x      
     background-repeat: repeat-y;    //   y      
     background-repeat: inherit;       //         
  • background-attachment: 배경 그림이 페이지에 따라 굴러갈지 여부를 결정합니다. 값은 다음과 같습니다.
    background-attachment: scroll; //   ;        
    background-attachment: fixed;  //        ,      ,               
    background-attachment: inherit;//        
  • 백그라운드의 여러 속성을 설정하고 싶을 때 각각 설정할 수도 있고 한 줄로 합쳐서 한 속성에 쓸 수도 있다. background: transparent url(image.jpg) 50% 0 scroll repeat-y;css3에는 백그라운드에 다음과 같은 여러 속성이 추가되었습니다.
  • background-color, 그림의 크기 사이즈를 설정하고 수치가 여러 개 있습니다.
      background-size: contain;     //            (       )
      background-size: cover;       //         (       )
      background-size: 50% 100%;    //          
  • background-clip, 배경 편집, 배경의 표시 위치를 잘 제어할 수 있습니다. 값은 다음과 같습니다.
     background-clip: border-box;   //        
     background-clip: padding-box;  //     padding (     )
     background-clip: content-box;  //         (  padding ,      )
  • 좋은 웹페이지 즐겨찾기