CSS로 웹 페이지 배경색을 제어하는 ​​방법

배경이라고 하면 배경색과 컬러사진밖에 없겠지만 이 두가지에 bgcolor="#808080" 과 background="URL" 을 추가하는 것은 다들 아실 거라 생각하는데, 여기서 소개해드릴 것은. 그렇지는 않습니다. CSS 스타일을 사용하여 제작되었으므로 다소 번거롭긴 하지만 전체적인 조화는 매우 좋습니다.

Background-color

이건 더 이상 소개할 필요가 없을 것 같습니다. 색상코드는 다들 아시리라 생각합니다. 이에 대한 기본값은 투명합니다. 예:

body{background-color:yellow} 
H1{background-color:#000000}

(추천 튜토리얼: CSS Getting Started Tutorial)

배경 이미지 background-image

HTML의 배경 이미지와 배경색 설정은 기본적으로 동일하며, 거기에 관련문을 추가하면 됩니다. . 하지만 여기서는 이 방법을 언급하는 것이 아닙니다. 제가 사용하는 방법은 여전히 ​​CSS입니다. background-image의 주요 기능은 이미지를 표시하는 것입니다. 이미지를 표시해야 하는 경우 끝에 URL(이미지 주소)을 추가하면 됩니다. 't, 기본값은 none이므로 추가하고 싶다면 끝에 none을 추가하면 됩니다. 예:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')
} 
h1
{
background-image:url('none')
}

에서 배경 사진을 사용할 때 너무 작은 사진이 자주 나타나 전체 페이지의 아름다움을 파괴하는 사진이 반복적으로 나타나는 등 다양한 문제가 발생하며 부적절합니다. 다른 사진으로 바꿔보세요. 하지만 이제 CSS에서 이미지를 제어하기 위해 다음 방법을 사용하는 한 앞으로는 더 이상 이러한 문제가 발생하지 않습니다.

사진이 반복적으로 표시되는지 여부 - 반복

때로는 반복 표시가 필요하지만 때로는 반복 표시가 골치 아픈 경우도 있습니다. 이제 이것이 매우 도움이 될 수 있으며, 사진 반복 방법(반복)을 제어하는 ​​데도 도움이 될 수 있습니다. 가로로, 세로로 반복하고, 양방향으로 반복), 이 세 방향으로 반복하려면 background-repeat, Repeat-y(세로 방향으로 퍼짐), 반복(두 방향으로 퍼짐) 뒤에 반복-x(가로로 퍼짐)를 추가하면 됩니다. 지도).

물론, 사진의 복제나 사진의 비복제를 제어할 수 있습니다. no-repeat는 반복되지 않고 하나의 배경 이미지만 표시됨을 나타내는 데 사용됩니다. 기본값은 배경 이미지를 반복적으로 표시하는 것입니다(반복). 예:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat
}

사진 표시 위치 지정 background-position

위의 비반복 표시 설정을 사용하면 사진이 왼쪽 상단에만 표시되기 때문에 위 설정 후에 배경 사진으로는 충분하지 않은 경우가 많습니다. 페이지의 다른 위치에는 없지만 이 배경 이미지를 중앙이나 다른 곳에 표시하려면 background-position이 도움이 될 수 있습니다. 왜냐하면 왼쪽 상단 모서리를 기준으로 이미지의 위치를 ​​표시하는 데 사용되기 때문입니다( 기본값은 0% 0%)이며 공백으로 구분된 두 개의 값으로 설정됩니다.

주요 값은 left　centerright 및 topcenterbottom입니다. 백분율 값을 사용하여 상대 위치를 지정하거나 값을 사용하여 절대 위치를 지정할 수도 있습니다. 가로 값 50px 이는 이미지가 왼쪽 상단 모서리 영역에서 가로로 50px 단위로 이동한다는 것을 의미합니다. 여기서 특히 지적할 점은 1. 값을 설정할 때 값만 지정하는 것과 같습니다. 가로 위치, 세로 위치는 자동으로 50%로 설정됩니다. 2. 설정 시 값이 음수이면 배경 이미지가 경계를 초과한다는 의미입니다. 예:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-position:100px 10px
}

이미지 스크롤 여부 제어 배경 첨부

위의 두 단계는 이미지 위치 지정을 완료하는 데 도움이 될 수 있지만 그렇게 한 후에도 완벽하지는 않습니다. 페이지에 스크롤 막대가 있으면 배경 이미지는 해당 위치에 영원히 위치하지 않습니다. 이미지를 해당 위치에 영원히 배치하려면 페이지 내용이 스크롤될 때만 이미지를 스크롤할 수 있습니다. 스크롤(정적)과 고정(스크롤) 중 하나를 추가하기만 하면 됩니다.

물론 무작위로 추가하는 것은 허용하지 않습니다. 결국 스크롤이 기본값이므로 페이지 내용과 함께 사진을 스크롤할 수 없습니다. 예:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}

알겠습니다. 위 설정을 적용하면 배경이 더 아름다워질 거라 믿습니다. 하지만 코드가 너무 많으면 가독성이 떨어지고 오류가 발생하기 쉬우므로 여기서 말씀드리고 싶습니다. 가장 좋은 점은 추가할 수 있다는 점입니다. 위의 모든 코드를 함께 사용하여 위의 관련 코드를 배경에 추가합니다.

배경에 코드 추가 시 각 값 사이에 공백을 넣어 구분해 주시고, 이미지가 표시되지 않도록 배경 이미지 URL 뒤에 배경색 코드를 넣지 마세요. 예:

body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fixed 100px 50px no-repeat
}

참고: 코드를 사용하여 직접 삽입하는 경우에는 다음 코드를 안쪽에 넣은 다음 사이에 넣어야 정상적으로 표시됩니다!

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS로 웹 페이지 배경색을 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!