CSS 배경 스타일

1614 단어
배경 이미지 스타일 background-image
background-image:url("    ");
  • 이미지 주소는 상대 주소일 수도 있고 절대 주소일 수도 있다.요소에 배경 이미지를 설정하려면 요소의 너비와 높이가 있어야 배경 이미지가 표시됩니다.

  • 배경 반복 스타일 background-repeat
  • CSS에서 background-repeat 속성을 사용하여 배경 이미지의 배열 여부를 설정할 수 있고 배열 방법을 설정할 수 있다.
  • background-repeat    :
    no-repeat        
    repeat         ,       (x )     (y )    
    repeat-x           (x )  
    repeat-y           (y )  
    
  • 주의: 배경 그림이 있는 요소의 폭이 배경 그림 자체의 폭보다 크거나 높아야 배열 효과가 있습니다.

  • 배경 그림 위치
  • 배경 위치 속성은 배경 이미지의 위치를 설정하는데 이 속성은 블록 요소와 대체 요소에만 적용됩니다.그 중에서 교체 요소는 img, input, textarea, selectobject이다.
  •   :background-positon:   /   ;
      :          ,        ,         。
    
  • 1, background-position에서 픽셀 값
  • background-position 수치가 픽셀 값인 경우 수평 방향 수치(x 축)와 수직 방향 수치(y 축)를 설정합니다.예를 들어'background-position:12px 24px;'은 배경 그림이 이 요소의 왼쪽 상단에 있는 수평 방향 위치는 12px이고 수직 방향 위치는 24px이다.이 두 수치 사이는 으로 구분해야 한다는 것을 주의하십시오.

  • 2, background-position은 키워드
  • background-position         
          
    top left      
    top center      
    top right     
    left center     
    center center     
    right center        
    bottom left   
    bottom center       
    bottom right      
    
  • background-position의 수치가 키워드일 때도 수평방향과 수직방향의 값을 설정해야 한다. 단지 값은 px 단위의 수치가 아니라 키워드로 대체해야 한다.
  • 좋은 웹페이지 즐겨찾기