백그라운드 이미지 속성을 사용하면 백그라운드에 표시 할 이미지를 지정할 수 있습니다. 배경색과 함께 사용할 수 있으므로 이미지를 반복하지 않으면 이미지를 덮을 수없는 경우 배경색이 배경색으로 채워집니다. 코드는 간단합니다. 경로는 스타일 시트와 관련이 있음을 기억하십시오. 다음 코드에서는 그림과 스타일 시트가 동일한 디렉토리에 있습니다.
사진의 경우 먼저 배경 그림을 생각합니다. 우리의 많은 장식은 배경 사진으로 달성되기 때문입니다. 이 경우 CSS 제어 배경 사진부터 시작하겠습니다.
정의 및 사용법배경 이미지 속성은 요소의 배경 이미지를 설정합니다.
요소의 배경은 내부 마진과 국경을 포함하여 요소의 모든 치수를 차지하지만 외부 마진은 아닙니다.
기본적으로 배경 이미지는 요소의 왼쪽 상단에 있으며 수평 및 수직으로 반복됩니다.
1. CSS 제어 배경 사진 :웹 페이지의 경우 디자인을 시작했을 때 배경 이미지가 무엇인지에 대해 너무 많이 생각하지 않을 수도 있습니다. 왜냐하면 대부분은 배경 색상을 디자인해야하기 때문입니다. 전경 음악과 동일하기 때문에 매우 간단하다고 생각하며 웹 페이지 오프닝 속도는 특정 영향을 미칩니다. 그러나 일반적인 개인 웹 사이트 나 개인 블로그의 경우 물론 자신의 성격을 보여주는 것은 필수적입니다. 물론, 너무 완벽하지는 않습니다. 좋은 것들과 나쁜 것들이 있습니다. 즉, 이미지를 사용할 수 없지만 CSS를 사용할 수있는 경우 교체 내용이 표시되지 않습니다. 따라서 내비게이션 버튼 텍스트 또는 이와 유사한 상황에서 CSS 배경 이미지를 사용하는 것이 좋습니다.
배경 이미지를 제어하는 많은 CSS 속성이 있으며 대부분 이미지와 관련된 한 대부분 사용됩니다.
(1) 배경 사진 가져 오기 :물론, 모두가 가장 친숙한 것은 배경과 배경 이미지입니다.
웹 페이지의 배경 이미지를 설계하기위한 코드는 다음과 같습니다.
바디 {배경 : URL (d : /images/04.jpg)}
또는
바디 {배경-이미지 : url (d :/images/04.jpg)}
이런 식으로, 우리는 웹 페이지에서 배경으로 사용하려는 사진을 가져올 수 있습니다.
(2) 배경 사진을 표시하는 방법 :물론 위의 코드 만 사용하면 원하는 효과를 표현할 수 없습니다. 그림이 작 으면 평평하게 기울어지기 때문입니다. 큰 경우, 표시하기 위해 스크롤 막대가 나타나고 좋지 않습니다. 따라서 디스플레이 컨트롤을 위해 배경 반복을 사용해야합니다.
그것은 가치입니다 :
반복 : 기본값. 배경 이미지는 초상화와 수평 방향으로 기울어 져 있습니다
반복 없음 : 배경 이미지는 타일이 아닙니다
반복 -X : 배경 이미지는 수평으로 만 기리합니다
반복 : 배경 이미지는 수직 방향으로만 기울어집니다.
코드는 CSS를 아는 사람은 다음과 같이 알고 있다고 생각합니다.
:
Body {배경 : url (d : /images/04.jpg); 배경 반복 : No-Repeat}
이런 식으로 원래 이미지 크기로 표시됩니다.
(3) 배경 이미지의 크기 제어 :그러나 문제는 사진이 너무 커지면 어떻게됩니까? 좋은 웹 페이지의 경우 너무 큰 이미지를 사용하지 않는 것이 가장 좋습니다. 그 이유는 위에서 언급되어 웹 페이지를 여는 속도에 영향을 미칩니다. PS 또는 불꽃 놀이를 사용하여 처리하는 것이 좋습니다. 그러나 내가 언급 한 이후로, 우리는 이미지 크기를 제어하기 위해 CSS를 사용하는 것을 두려워하지 않습니다.
많은 사람들이 자연스럽게 다음 코드를 사용할 것이라고 생각합니다.
코드를 복사하십시오