CSS에서 배경 속성을 설정하는 방법(자세한 설명)
- 青灯夜游앞으로
- 2018-10-12 18:01:013060검색
이 글에서는 CSS에서 배경 속성을 설정하는 방법에 대해 자세히 설명합니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.
배경 관련 속성은 주로 다음과 같습니다.
background-color 배경색
background-image 배경 이미지
background-repeat 타일 반복 여부(기본 타일) | ) | 반복-y(세로 타일링) | no-repeat(타일링 없음)
배경 위치 배경 위치 길이(백분율) | 위치(상단 중앙 버튼 왼쪽 오른쪽) 일반적으로 하나를 지정하면 두 개가 함께 사용됩니다. 다른 방향은 기본적으로 중앙으로 설정되어 있으며 두 가지 방법을 혼합하여 일치시킬 수도 있습니다. 위치 명사에는 순서 구분이 없지만 백분율을 사용할 때는 항상 순서가 있습니다. 먼저 가로로, 그다음 세로로
background-attachment 배경이 고정되거나 스크롤 스크롤이 고정됨
배경: 배경색 배경 이미지 여부 타일식 배경 고정 또는 스크롤 배경 위치
#p1 {
width: 300px;
height: 300px;
background-color: blue; /*默认是transparent透明的*/
/* background-color: transparent; */
background-image: url(Images/2.jpg);
background-repeat: no-repeat; /*不平铺，默认是水平垂直平铺*/
/* background-repeat: repeat-y; */
/* background-repeat: repeat-x; */
/* background-position: right bottom; */
background-position: 10% center;
background-attachment: fixed;
}
배경을 반투명하게 하려면 색상을 지정할 때 rgba(r, g b,a)를 사용하여 투명도를 지정하세요
p {
width: 100%;
height: 300px;
background-color: rgba(0, 0, 0, 0.6);
}
여러 배경 이미지 사용, 배경을 사용하여 여러 URL 지정, 각 그룹은 ',' 쉼표로 구분됩니다. 그림이 겹치는 경우 이전 그림이 다음 그림을 덮지만 전체 배경색은 마지막 URL 뒤에 지정해야 합니다.
p {
width: 100%;
height: 300px;
background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;
}
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 을 방문하세요!
위 내용은 CSS에서 배경 속성을 설정하는 방법(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!