CSS를 사용하여 웹페이지 배경 제어

웹 페이지 배경에 더 적합한 사진에 대해 다들 걱정하시는 것 같아요. 사진이 너무 크거나 작거나 너무 지저분하기 때문이죠. 사진이 귀하의 홈페이지에 더 적합합니까? 대답은 '예'입니다. 구현 방법을 알고 싶다면 지금 저를 따라오세요. 그러면 곧 배우실 수 있을 거라 장담합니다. 하지만 온라인으로 '가족을 시작'하려는 친구들은 일반적으로 PC방에서 '개업'(나처럼 다른 사람 홈페이지에서 해당 코드를 뽑아서 변경한 것뿐임)과 다른 친구들은 DW나 DW를 사용하는 경우가 일반적이다. 집에서 FP 등의 전문 소프트웨어를 사용하여 제작하고 업로드할 수 있으므로 먼저 PC방에서 '오픈'하는 친구들을 위해 몇 가지를 간략하게 소개하겠습니다. DW4로 만든 배경 스타일. 사실, 단지 방식만 다를 뿐 모든 것이 동일하다고 말해야 합니다. 좋아요, 잡담은 그만하고 이제 본론으로 들어가겠습니다.

배경이라고 하면 배경색과 컬러사진밖에 없겠지만 이 두가지에 bgcolor="#808080" 과 background="URL" 을 추가하는 것은 다들 아실 거라 생각하는데, 여기서 소개해드리겠습니다. . 이런 방식은 아니지만 CSS 스타일을 사용하여 처리했습니다. 조금 번거롭긴 하지만 전체적인 조화는 매우 좋습니다.

·배경색

이건 더 이상 소개할 필요가 없을 것 같아요. 색상코드는 다들 아실 거라 생각합니다. 아니면 특정 코드로 표현해도 될 것 같아요. . 이에 대한 기본값은 투명합니다.
예: 본문{배경색:노란색}
H1{배경색:#000000}

·배경 이미지 배경이미지

HTML의 배경 이미지 및 배경색 내부 설정은 기본적으로 동일하며 관련문을 추가하여 완성할 수 있습니다. 하지만 여기서는 이 방법을 말하는 것이 아니고, 제가 사용하는 방법은 CSS입니다. background-image의 주요 기능은 이미지를 표시하는 것입니다. 이미지를 표시해야 하는 경우 끝에 URL(이미지 주소)을 추가하면 됩니다. 't, 기본값은 none이므로 추가하고 싶다면 끝에 none을 추가하면 됩니다.
예: body{배경-이미지:url('file&:///C:/WINDOWS/BACKGRND.GIF')}
h1{배경-이미지:url('none')}

웹사이트에서 배경 이미지를 사용하다 보면 일부 이미지가 너무 작아서 전체 페이지의 아름다움을 파괴하는 반복 이미지, 교체하고 싶을 때 부적절한 이미지 등 귀찮은 상황에 자주 직면하게 됩니다. 바. 하지만 이제 CSS에서 이미지를 제어하기 위해 다음 방법을 사용하는 한 앞으로는 더 이상 이러한 문제가 발생하지 않습니다.

·배경 반복 표시 여부

때로는 반복 표시가 필요하지만 때로는 반복 표시가 골치 아픈 경우도 있습니다. 그림이 반복되는 방식을 제어합니다(가로로 반복, 세로로 반복, 양방향으로 반복). 이 세 방향으로 반복하려면 background-repeat(가로 방향으로 퍼짐),peat-y( 세로 방향으로 펴기), 반복합니다(양방향으로 펴기). 물론, 사진의 복제를 제어할 수 있고, 사진의 비복제도 제어할 수 있습니다. no-repeat는 반복되지 않고 하나의 배경 이미지만 표시됨을 나타내는 데 사용됩니다. 기본값은 배경 이미지를 반복적으로 표시하는 것입니다(반복).
예: body{Background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');Background-repeat:no-repeat}

·이미지 표시 위치 찾기 background -position

위의 설정 후 배경 이미지로는 충분하지 않은 경우가 많습니다. 위의 반복되지 않는 표시 설정을 사용하면 이미지가 페이지의 왼쪽 상단에만 표시되고 다른 곳에서는 표시되지 않기 때문입니다. 그러나 이 배경 이미지를 중앙이나 다른 곳에 표시하려면 background-position이 도움이 될 수 있습니다. 왜냐하면 왼쪽 상단 모서리를 기준으로 이미지의 위치를 ​​표시하는 데 사용되기 때문입니다(기본값은 0% 0%입니다). ), 공백으로 구분된 두 개의 값으로 설정됩니다. 주요 값은 left|center|right 및 top|center|bottom입니다. 백분율 값을 사용하여 상대 위치를 지정하거나 값을 사용하여 절대 위치를 지정할 수도 있습니다. 50px 가로 값은 이미지가 왼쪽 상단 모서리 영역에서 가로로 50px 단위로 이동한다는 의미입니다. 여기서 주목해야 할 점은 1. 값을 설정할 때 지정하는 것과 동일한 값 하나만 제공합니다. 가로 위치만 있고 세로 위치는 자동으로 50%로 설정됩니다. 2. 설정한 값이 음수이면 배경 이미지가 경계를 초과한다는 의미입니다.
예: 본문{배경-이미지:url('file&:///C:/WINDOWS/BACKGRND.GIF');배경-반복:no-repeat;배경-위치:100px 10px}

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

위의 두 단계는 이미지 위치 지정을 완료하는 데 도움이 될 수 있지만 페이지에 스크롤 막대가 있는 경우 배경 이미지가 영원히 해당 위치에 위치하지 않기 때문에 완벽하지는 않습니다. 그림을 해당 위치에 영원히 두려면 페이지 내용이 스크롤될 때에만 그림을 스크롤할 수 있습니다. 이때 배경 첨부를 사용하면 스크롤(스틸) 및 고정(스크롤)만 추가하면 됩니다. ) 그 중 하나만 가능합니다. 물론 무작위로 추가하는 것은 허용되지 않습니다. 결국 스크롤이 기본값이므로 이미지가 페이지 내용과 함께 스크롤되는 것이 허용되지 않습니다.
예: 본문{배경-이미지:url('file&:///C:/WINDOWS/BACKGRND.GIF');배경-반복:no-repeat;배경-부착:고정}

자, 위의 설정을 하면 배경이 더 아름다워지리라 믿습니다만, 코드가 너무 많으면 가독성이 떨어지고 오류가 발생하기 쉬우므로 여기서 말씀드리고 싶은 것은 위의 설정을 사용해도 된다는 것입니다. 모든 코드는 함께 사용하면 위의 관련 코드가 배경에 추가됩니다. 배경에 코드를 추가할 때 각 값 사이에 공백을 추가하여 구분하고, 이미지가 표시되지 않도록 배경 이미지의 URL 뒤에 배경 색상 코드를 넣지 마십시오.
예: body{Background:green url('file&:///C:/WINDOWS/BACKGRND.GIF')fixed 100px 50px no-repeat}

마지막으로 다시 한번 말씀드리고 싶습니다. 코드를 직접 삽입할 경우에는 반드시 아래의 코드를 내부에 넣은 후 사이에 넣어야 정상적으로 표시됩니다!

위 내용은 CSS를 사용하여 웹 페이지의 배경을 제어하는 ​​방법에 대한 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!