최신 웹 개발 튜토리얼
 

CSS배경

❮ 이전 다음 장 ❯

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

CSS 배경 속성 :

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

배경색

background-color 속성은 요소의 배경색을 지정한다.

페이지의 배경색과 같이 설정된다 :

예

body {
    background-color: lightblue;
}
»그것을 자신을 시도

CSS로, 컬러는 가장 자주에 의해 지정됩니다 :

  • 같은 - 올바른 색상 이름 "red"
  • 같은 - 16 진수 값 "#ff0000"
  • 같은 - RGB 값 "rgb(255,0,0)"

봐 CSS 색상 값 가능한 색상 값의 전체 목록.

아래의 예에서, <h1>, <p> 및 <div> 요소는 다른 배경 색상을 가지고 :

예

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
»그것을 자신을 시도

배경 이미지

background-image 속성은 엘레멘트의 배경으로 사용할 이미지를 지정합니다.

그것은 전체 요소를 포함하도록 기본적으로 화상이 반복된다.

페이지의 배경 이미지는 다음과 같이 설정할 수 있습니다 :

예

body {
    background-image: url("paper.gif");
}
»그것을 자신을 시도

아래 텍스트와 배경 이미지의 잘못된 조합의 일례이다. 텍스트는 거의 읽을 수 있습니다 :

예

body {
    background-image: url("bgdesert.jpg");
}
»그것을 자신을 시도
노트주 : 배경 이미지를 사용하는 경우, 텍스트를 방해하지 않는 화상을 사용한다.

배경 이미지 - 가로 또는 세로로 반복

기본적으로 background-image 속성은 수평 및 수직으로 이미지를 반복합니다.

일부 이미지는 수평 또는 수직으로 반복해야합니다, 또는 그들은이 같은 이상한 모양 :

예

body {
    background-image: url("gradient_bg.png");
}
»그것을 자신을 시도

이미지가 위의 가로 방향으로 만 반복하는 경우 ( background-repeat: repeat-x; ), 배경이 더 잘 보일 것이다 :

예

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
»그것을 자신을 시도
노트참고 : 이미지를 수직으로 설정 반복하려면 background-repeat: repeat-y;

배경 이미지 - 설정 위치없이 반복

단 한번도에 의해 지정되는 배경 이미지보기 background-repeat 속성을 :

예

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
»그것을 자신을 시도

위의 예에서, 상기 배경 이미지는 텍스트와 같은 곳에서 도시되어있다. 우리는 너무 많은 텍스트를 방해하지 않도록 상기 화상의 위치를 ​​변경하려면.

이미지의 위치는로 지정된 background-position 속성 :

예

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
»그것을 자신을 시도

배경 이미지 - 고정 위치

배경 이미지가 고정되도록 지정하려면 사용 (페이지의 나머지 부분과 스크롤되지 않습니다) background-attachment 속성을 :

예

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
»그것을 자신을 시도

배경 - 약식 속성

코드를 단축하기 위해, 하나의 속성의 모든 배경 속성을 지정하는 것도 가능하다. 이것은 약식 속성이라고합니다.

배경에 대한 약식 속성이다 background :

예

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
»그것을 자신을 시도

속기 속성을 사용할 때 속성 값의 순서이다 :

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

속성 값 중 하나가 다른 사람이 순서대로만큼,없는 경우는 문제가되지 않는다.

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»

모든 CSS 배경 속성

재산 기술
background 하나의 선언에있는 모든 배경 속성을 설정합니다
background-attachment 배경 이미지가 페이지의 나머지 부분과 고정 또는 스크롤 여부를 설정합니다
background-color 요소의 배경색을 설정
background-image 요소의 배경 이미지를 설정
background-position 배경 화상의 개시 위치를 설정
background-repeat 배경 화상이 반복되는 방식으로 설정

❮ 이전 다음 장 ❯