CSS에는 5가지 주요 배경 속성이 있습니다.
background-color: 채워진 배경의 색상을 지정합니다.
background-image : 이미지를 배경으로 참조합니다.
background-position: 요소의 배경 이미지 위치를 지정합니다.
background-repeat : 배경 이미지를 반복할지 결정합니다.
background-attachment: 배경 이미지가 페이지와 함께 스크롤되는지 여부를 결정합니다.
이러한 속성은 모두 하나의 축약된 속성인 배경으로 결합될 수 있습니다. 주목해야 할 한 가지 중요한 점은 배경이 패딩 및 테두리를 포함하여 요소의 모든 콘텐츠 영역을 차지하지만 요소의 여백은 포함하지 않는다는 것입니다. Firefox, Safari, Opera 및 IE8에서는 잘 작동하지만 IE6 및 IE7에서는 배경이 테두리를 계산하지 않습니다.
Background-color
background-color 속성은 배경을 단색으로 채워줍니다. 이 색상을 지정하는 방법은 여러 가지가 있으며 다음 방법은 모두 동일한 결과를 제공합니다.
배경색: 파란색;
배경색: rgb(0, 0, 255);
배경색: #0000ff;
배경색을 투명하게 설정하여 배경색 아래에 있는 요소를 볼 수도 있습니다.
배경 이미지
배경 이미지 속성을 사용하면 배경에 표시할 이미지를 지정할 수 있습니다. 배경색과 함께 사용할 수 있어, 이미지가 반복되지 않는 경우 이미지로 덮이지 않은 부분은 배경색으로 채워집니다. 코드는 매우 간단합니다. 경로가 스타일 시트에 상대적이라는 점만 기억하면 됩니다. 따라서 다음 코드에서는 이미지와 스타일 시트가 동일한 디렉터리에 있습니다.
background-image: url (image.jpg);
그러나 이미지가 Images라는 하위 디렉터리에 있는 경우 다음과 같아야 합니다.
background-image: url( Images/image.jpg);
<html>
<head>
<style type="text/css">
body {background-image: url(这个地方要写的就是你的图片的url地址了);}
</style>
</head>
<body>
</body>
</html>Background-repeat)
배경 이미지 설정 시 기본 타일로 이미지가 표시됩니다. 전체 요소를 덮기 위해 수평 및 수직으로. 이것이 필요할 수도 있지만 때로는 이미지가 한 번만 나타나거나 한 방향으로만 타일링되기를 원할 수도 있습니다. 가능한 설정 값과 결과는 다음과 같습니다.
background-repeat:peat; /* 기본값, 가로 및 세로 타일링*/
background-repeat: no-repeat; 타일링이 아닙니다. 사진은 한 번만 표시됩니다. */
background-repeat:peat-x; /* 가로로 타일링(x축을 따라) */
background-repeat:peat-y; x축) y축을 따라) */
background-repeat: 상속; /* 상위 요소의 background-repeat 속성 상속 */
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>배경의 약어속성
배경의 다양한 속성을 매번 따로 작성하지 않고 한줄로 묶어서 사용할 수 있습니다. 형식은 다음과 같습니다.
배경: «색상» «이미지» «위치» «부착» «반복»
예를 들어 다음 명령문은
background-color입니다. : 투명;
배경 이미지: url(image.jpg);
배경 위치: 50% 0;
배경 첨부: 스크롤;
배경 반복: repeat-y;
는 한 줄로 결합할 수 있습니다:
background: transparent url (image.jpg) 50% 0 스크롤 Repeat-y;
그리고 다음이 있습니다. 각각의 값을 지정할 필요가 없습니다. 값이 생략되면 속성의 기본값이 사용됩니다. 예를 들어 위 줄은 다음과 같은 효과를 갖습니다:
background: url (image.jpg) 50% 0peat-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(图片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
</body>
</html>
다음 섹션