CSS 배경 사용 방법에 대해
- 不言원래의
- 2018-06-20 15:23:012185검색
다음은 모든 CSS 배경에 대한 요약입니다. 내용이 꽤 괜찮아서 지금 공유해서 참고용으로 올려드리겠습니다.
모든 배경 속성은 상속될 수 없습니다.
1. background-color
모든 요소는 배경색을 설정할 수 있습니다.
background-color의 기본값은 투명합니다. 즉, 요소가 배경색을 지정하지 않으면 배경이 투명해 상위 요소의 배경이 표시됩니다.
2. 배경 이미지
모든 요소는 배경 이미지를 설정할 수 있습니다.
여러 배경 이미지를 쉼표로 구분하여 설정할 수 있으며, 배경 이미지는 이전 레이어가 위에 기록됩니다.
3. background-repeat
repeat(기본값)/no-repeat/repeat-x/repeat-y
4. background-attachment
scroll(기본값)/fixed
5. -position
Pixel 방식: 이미지의 왼쪽 상단을 시작점으로 하여 첫 번째 값은 수평 이동 거리, 두 번째 값은 수직 이동 거리, 하나만 지정한 경우 두 번째 값; 기본값은 50%입니다.
백분율 방식: 이미지와 요소 모두에 백분율을 적용하고 해당 지점을 일치시켜 위치를 지정합니다. 백분율만 지정하면 세로 방향이 50%라는 의미입니다.
키워드 방식: 상단, 오른쪽, 하단, 왼쪽, 중앙(결합 위치 지정); 하나의 값만 지정한 경우 두 번째 값은 기본적으로 중앙으로 설정됩니다.
참고: 배경 위치는 음수일 수 있습니다.
기본적으로 배경색은 테두리 아래로 확장되며 배경 이미지는 패딩 영역의 왼쪽 상단에 있습니다.
6. background-size
배경 이미지의 크기를 설정합니다. 기본값은 자동입니다.
픽셀 방법: 첫 번째 값은 너비를 설정하고, 두 번째 값은 높이를 설정하며, 값이 하나만 있는 경우 두 번째 값은 자동입니다.
백분율 방식: 상위 요소의 너비와 높이를 기준으로 계산됩니다.
커버라는 키워드는 이미지의 가로 세로 비율을 변경하지 않고 가로, 세로 방향으로 전체 요소를 덮어 이미지의 일부가 넘칠 수 있습니다.
contain 키워드는 이미지의 가로 세로 비율을 변경하지 않으며 전체 요소가 한 방향으로 덮일 때까지 이미지를 최대한 늘려서 다른 방향은 덮이지 않을 수 있습니다.
7. background-origin
은 테두리의 왼쪽 상단 모서리인 배경 이미지
border-box의 초기 위치를 정의합니다.
padding-box, 패딩 영역의 왼쪽 상단 모서리. 기본값.
content-box, 콘텐츠 영역의 왼쪽 상단 모서리.
8. background-clip
CSS3 background-clip 속성은 배경의 페인팅 영역을 지정합니다.
이 속성은 세 가지 다른 값을 사용합니다.
•border-box - (기본값) 배경이 그려집니다. to the border of the border
•padding-box - 배경이 padding의 바깥쪽 가장자리에 그려집니다
•content-box - 배경이 컨텐츠 상자 안에 그려집니다
(영어 설명이 더 명확합니다)
(영어는 모두 W3Schools Online에서 포팅되었습니다.)
background-origin과 background-clip은 서로 독립적이며 서로 간섭하지 않습니다.
배경의 CSS 작성 방법과 관련하여 저는 개인적으로 분명히 논리적이고 계층적이어야 한다고 생각합니다. 구체적으로:
배경은 배경 이미지를 정의하고, background-color는 배경 색상을 정의하고, background-clip은 배경을 정의합니다. 표시 영역.
(개인 의견, 참고용)
전체 크기 배경 이미지
웹사이트에서 항상 브라우저 창 전체를 덮는 배경 이미지를 갖고 싶다면
요구 사항은 다음과 같습니다.
• 전체 페이지를 이미지로 채웁니다(공백 없음)
• 필요에 따라 이미지 크기 조정
• 페이지 중앙 이미지
• 스크롤 막대를 발생시키지 않음
다음 예에서는 방법을 보여줍니다. html 요소를 사용하세요(html 요소는 항상 브라우저 창의 높이 이상입니다). 그런 다음 고정된 배경을 설정하고 background-size 속성으로 크기를 조정하세요. 팁:
배경 이미지의 수평 타일링을 사용하여 물결 모양 테두리 효과를 얻으세요. (현재 아이디어만 있고 원하는 이미지를 찾지 못했습니다.)
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트에 주목하세요!
관련 권장 사항:
CSS3에서 하드웨어 가속을 켤 때의 사용 및 위험에 대해위 내용은 CSS 배경 사용 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!