CSS에서 배경 이미지를 구현하는 방법은 무엇입니까?



이 기사는 CSS의 배경 이미지에 대한 상세하고 포괄적 인 지식을 제공합니다. 그것을 사용하고 동일하게 구현하는 곳.

CSS는 Cascading Style Sheets의 머리 글자입니다. 웹 페이지를 변환 할 수있는 간단하면서도 강력한 디자인 언어입니다. 간단히 말해서, 웹 페이지를 표시 가능하고 사용자의 관심을 끌 수있는 프로세스를 간소화합니다. . 이 기사에서는 CSS에서 다양한 배경 이미지를 다음 순서로 구현하는 방법을 이해합니다.

CSS 속성의 배경 이미지

이미지의 동작과 위치를 제어하는 ​​데 사용되는 많은 속성이 있습니다. 이러한 속성은 다음과 같습니다.





  • 배경 이미지
  • 배경 반복
  • 배경 첨부
  • 배경 위치
  • 배경 크기
  • 배경색

우리는 이러한 각 속성에 익숙해지고 흥미로운 데모를 통해 언제 어떻게 사용하는지 살펴볼 것입니다.

CSS의 배경 이미지



그만큼 배경 이미지 이름에서 알 수 있듯이 속성은 웹 페이지의 요소를 통해 배경 이미지를 표시하고 설정하는 데 사용됩니다. 기본적으로 배경 이미지는 요소의 왼쪽 상단 모서리에 배치됩니다.

통사론: 배경 이미지 : URL | 없음 | 선형 그라데이션 | 방사형 그라데이션

body {background-image : url ( 'apple.jpg')}

URL을 사용하는 배경

매개 변수를 이해하겠습니다.



  • URL : 이 매개 변수에 대한 입력을 통해 이미지의 파일 경로 또는 배경으로 설정해야하는 이미지의 URL을 지정할 수 있습니다. 두 개 이상의 이미지를 선언하기 위해 URL은 쉼표 구분 기호로 구분됩니다.
body {background-image : url ( 'apple.jpg')}

Background-url

  • 없음 : 이것은 속성의 기본값이며 값이 지정된 경우 배경 이미지가 렌더링되지 않습니다.
본문 {배경 : 없음}
  • 선형 그래디언트 () : 배경 이미지는 선형 그래디언트로 설정됩니다. 이 속성, 즉 위에서 아래로 최소 두 가지 색상을 지정해야합니다.
body {background-color : # 001 background-image : linear-gradient (white 15 %, transparent 16 %), linear-gradient (white 15 %, transparent 16 %) background-size : 60px 60px background-position : 00, 30px 30px}

  • 방사형 그래디언트 () : 배경 이미지는 방사형 그래디언트로 설정됩니다. 이 속성, 즉 중앙에서 가장자리까지 최소 두 가지 색상을 지정해야합니다.
body {background-color : # 001 배경 이미지 : 방사형 그라데이션 (흰색 15 %, 투명 16 %), 방사형 그라데이션 (흰색 15 %, 투명 16 %) 배경 크기 : 60px 60px 배경 위치 : 00, 30px 30px}

  • 반복 선형 그라디언트 () : 선형 그래디언트를 반복합니다. 반복-선형-그라데이션에 대한 선형 그라디언트에서 위에서 본 것과 동일한 예를 사용하여 차이점을 살펴 보겠습니다.
body {background-color : # 001 background-image : repeating-linear-gradient (white 15 %, transparent 16 %), repeating-linear-gradient (white 15 %, transparent 16 %) background-size : 60px 60px background-position : 0 0, 30px 30px}

  • 반복 방사형 그라데이션 () : 방사형 그래디언트를 반복합니다. 위에서 방사형 그래디언트에서 사용한 것과 동일한 예제를 살펴 보겠습니다.
body {background-color : # 001 background-image : repeating-radial-gradient (white 15 %, transparent 16 %), repeating-radial-gradient (white 15 %, transparent 16 %) background-size : 60px 60px background-position : 0 0, 30px 30px}

대체 배경

mysql_fetch_array PHP

대체 옵션으로 배경색을 추가하는 것은 항상 전문적인 팁으로 권장됩니다. 특히 배경 이미지가로드되지 않거나 개발 중에 설정 한 그래디언트 배경이 표시되는 일부 오래된 브라우저에서 지원되지 않을 때 구제됩니다.

이는 사용자 경험을 손상시키지 않으며 다음과 같이 선언 할 수 있습니다.

본문 {배경 : url (apple_lost.jpg) 분홍색}

여러 배경

또한 여러 배경 이미지를 설정하는 옵션이 있으며 이는 전경 및 배경 이미지와 같은 대부분의 경우에 필요합니다. 여기서 이미지의 순서가 중요합니다. 맨 앞에 있어야 할 이미지가 먼저 선언되고 마지막에 있어야 할 이미지가 다음에 선언됩니다.

다음은 여러 배경 이미지의 예입니다.

body {background-image : url ( 'small-heart.jpg'), url ( 'background.jpg')}

배경 반복

background-repeat 속성은 background-image와 함께 이미지의 반복 동작을 정의하는 데 사용됩니다. 배경 이미지의 반복 여부와 방법을 지정합니다. 기본적으로 배경 이미지는 수직 및 수평으로 반복됩니다.

가능한 값은 다음과 같습니다.

  • repeat- 이미지가 수평 및 수직으로 반복됩니다.
  • no-repeat – 이미지가 반복되지 않습니다.
  • repeat-x – 이미지가 수평으로 반복됩니다.
  • repeat-y – 이미지가 수직으로 반복됩니다.
  • space- 이미지가 짝수 간격이나 간격으로 반복됩니다.
  • round – 이미지가 반복되어 이미지 사이에 간격이없는 영역을 채 웁니다.

background-repeat 속성에 대한 CSS 구문은 다음과 같습니다.

배경 반복 : repeat | repeat-x | repeat-y | 반복 없음 | space | round

theano 대 tensorflow 대 keras
body {background-image : url ( 'heart.png'), url ( 'background.png') background-repeat : repeat-y, repeat-x background-color : #ffffff}

배경 첨부

그만큼 배경 첨부 속성은 배경 이미지와 함께 사용되어 콘텐츠가 스크롤 될 때 이미지가 스크롤되어야하는지 여부를 나타냅니다. 배경 이미지가 고정되어야하거나 브라우저 창보기와 관련하여 문서와 함께 스크롤되어야 함을 나타냅니다. 기본값은 스크롤입니다.

가능한 값은 다음과 같습니다.

  • scroll – 이미지가 페이지와 함께 스크롤됩니다.
  • fixed – 이미지가 페이지와 함께 스크롤되지 않습니다.

background-attachment의 CSS 구문은 다음과 같습니다.

배경 첨부 : 스크롤 | 고정

body {background-image : url ( 'heart.png'), url ( 'background.png') background-repeat : space, round}

배경 위치

그만큼 배경 위치 속성은 배경 이미지의 위치 또는 위치를 나타내는 데 사용됩니다. 가능한 값은 다음과 같습니다.

  • 상단
  • 권리
  • 바닥
  • 왼쪽
  • 센터
  • 이러한 값의 조합 (예 : 왼쪽 상단)

배경 위치에 대한 CSS 구문은 다음과 같습니다.

배경 위치 : 맨 위 | 오른쪽 | 왼쪽 | 아래 | 중앙

body {background-image : url ( 'heart.png') background-repeat : no-repeat background-attachment : scroll}

CSS 크기의 배경 이미지

이 속성은 배경 이미지의 크기를 제어 할 수 있으므로 가장 유용한 속성 중 하나입니다. 이 속성을 사용하여 결과를 얻을 수있는 다양한 조합이 있습니다. 기본값은 auto입니다.

다음 값은 background-size와 함께 사용할 수 있습니다.

  • 자동
  • 길이-이미지의 높이와 너비 (예 : 20px 40px.
  • 백분율-부모 요소에 대한 백분율로 이미지의 높이와 너비 예. 50 % 50 %.
  • center- 이미지를 중앙에 정렬
  • 배경 영역을 완전히 덮도록 이미지 크기를 조정합니다.
  • 포함, 실제 높이와 너비에 맞게 이미지 크기를 조정합니다.

배경 위치에 대한 CSS 구문은 다음과 같습니다.

배경 크기 :

body {background-image : url ( 'heart.png'), url ( 'background.png') background-repeat : no-repeat, repeat background-size : 400px 150px, cover}

body {background-image : url ( 'heart.png'), url ( 'background.png') background-repeat : no-repeat, repeat background-size : contain, 400px 150px}

배경색

이것은 CSS의 모든 속성 중 가장 간단한 것이 적용됩니다. 페이지 배경에 단색을 적용합니다. 이 속성의 값은 색상 (예 : 빨간색, 파란색 등), 16 진수 값 및 RGB 값으로 지정할 수 있습니다.

배경색에 대한 CSS 구문은 다음과 같습니다.

배경색:

double을 정수 Java로 변환
body {background-image : url (small-heart.jpg) background-color : # 22a8e3}

이것으로 배경과 함께 사용할 수있는 모든 속성을 마칩니다. 데모에서 본 것처럼 항상 다양한 속성 조합을 시도 할 수 있습니다.

CSS는 필수이며 모든 프런트 엔드 웹 개발자를위한 기술을 습득해야합니다. 배경을 디자인하고 스타일링하고 인상적인 웹 사이트를 구축하고 사용자 경험을 풍부하게하는 데 도움이됩니다. 가장 좋은 방법은이 특별한 프런트 엔드 기술을 계속 실험하고 최대한 활용하는 것입니다.이 기술은 경이로움을 일으키고 페이지를 동적으로 변환 할 수 있습니다.

우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.

질문이 있으십니까? 'CSS의 배경 이미지'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.