CSS 배경 속성이란 무엇입니까? CSS 배경 속성 요약(코드 포함)
- 不言원래의
- 2018-08-04 10:52:405785검색
css 배경 속성은 HTML 요소의 배경을 정의하는 데 사용됩니다. 그렇다면 CSS 배경 속성은 무엇인가요? 예를 들어 CSS 배경색 속성과 CSS 이미지 배경 속성은 모두 CSS 배경 속성에 속합니다. 이 기사에서는 CSS 배경 속성에 관련된 속성을 요약합니다.
우선 CSS 관련 속성을 살펴보겠습니다.
- #🎜🎜 ##🎜🎜 #배경색: CSS 배경색 설정
- Background-image: CSS 배경색 설정
- # 🎜🎜#Background -repeat: CSS는 배경 이미지의 반복 여부와 반복 방법을 설정합니다
- Background-position: CSS는 배경 이미지의 위치를 설정합니다#🎜 🎜#
-
Background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 여부
배경: 단축 속성인 이 기능은 명령문에서 배경 속성을 설정하는 것입니다. 매체
- 요소 배경의 범위:
배경은 요소 영역의 콘텐츠, 패딩 및 테두리를 채우며 요소 테두리의 외부 경계까지 확장됩니다(여백은 포함하지 않음). 테두리에 투명한 부분(예: 점선 테두리)이 있는 경우 배경색은 이러한 투명한 부분을 통해 표시됩니다.
브라우저 지원:모든 주요 브라우저는 배경 속성을 지원합니다.
참고: IE7 및 이전 버전은 "상속된" 값 (상속)을 지원하지 않습니다. IE8에서는 !DOCTYPE을 정의해야 합니다. IE9는 "상속"을 지원합니다.
css 배경색: inherit）。 IE8需要定义!DOCTYPE。 IE9支持"继承"。
css背景颜色：
background-color
background-color 속성은 요소의 배경색을 정의하는 데 사용됩니다. body {background-color: #b0c4de;}CSS에서 색상 값은 일반적으로 다음과 같은 방식으로 정의됩니다. - 16진수 - 예: #ff0000#🎜🎜 ## 🎜🎜#
- RGB - 예: rgb(255,0,0)
- 색상 이름 - 예: 빨간색# 🎜🎜## 🎜🎜#기본값 - 투명, 투명을 의미합니다. 요소가 배경색을 지정하지 않으면 배경이 투명해집니다.
- inherit 상위 요소의 배경색을 상속합니다. 이는 IE에서 호환성 문제가 있습니다.
- css 이미지 배경:
Background-image 속성은 요소의 배경 이미지를 정의하는 데 사용됩니다. .
기본적으로 배경 이미지는 요소의 왼쪽 상단에 배치되며 가로 및 세로로 반복됩니다.body {background-image: url('paper.gif');}
팁:
배경색과 배경 이미지가 공존할 수 있습니다. 사용 가능한 배경색을 설정해 주세요. 그러면 배경 이미지를 사용할 수 없는 경우 페이지도 좋아질 수 있습니다. 시각 효과.body {background-image: url('paper.gif');background-color:#fff;}속성 값:
none - 기본 배경 이미지 없음 - url('image path') - 이미지의 접근 가능한 경로로, 네트워크 주소, 상대 경로 주소, 절대 경로 주소를 사용할 수 있습니다.
- inherit - 부모로부터 상속 요소#🎜 🎜#
- css 배경 반복:
배경을 타일링해야 하는 경우 배경을 사용할 수 있습니다. -반복 속성. body {
background-image: url('gradient2.png');
background-repeat: repeat-x;
}속성 값:
repeat를 사용하면 기본적으로 이미지가 가로 및 세로로 타일링됩니다.
repeat-x 및peat-y는 배경 이미지를 각각 가로 또는 세로 방향으로만 반복합니다.
no-repeat는 이미지가 어떤 방향으로도 타일링되는 것을 허용하지 않습니다.
inherit 상위 요소에서 상속됩니다.
- css 배경 위치 지정:
Background-position 속성은 배경 이미지의 위치를 제어하는 데 사용됩니다. , 일반적으로 background-repeat와 함께 사용됩니다. no-repeat가 사용됩니다. body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: right top;
} background-position 속성에 값을 제공하는 방법에는 여러 가지가 있습니다. 먼저 사용할 수 있는 키워드는 위쪽, 아래쪽, 왼쪽, 오른쪽, 가운데입니다. 일반적으로 이러한 키워드는 쌍으로 표시되지만 항상 그런 것은 아닙니다. 100px과 같은 길이 값을 사용할 수도 있고 마지막으로 백분율 값을 사용할 수도 있습니다.
이미지 게재위치 키워드는 이름에서 알 수 있듯이 가장 이해하기 쉽고 작동하기 쉽습니다. 예를 들어 상단 오른쪽은 요소 패딩 영역의 오른쪽 상단에 이미지를 배치합니다. 사양에 따르면 위치 키워드는 가로 방향과 세로 방향에 해당하는 키워드가 2개 이하인 한 순서에 상관없이 나타날 수 있습니다. 오른쪽 상단은 동일합니다.
한 개의 키워드만 나타나면 다른 키워드가 중심으로 간주됩니다.
백분율:백분율 값은 좀 더 복잡한 방식으로 표현됩니다. 백분율 값을 사용하여 요소 내에서 이미지를 중앙에 배치한다고 가정해 보겠습니다. body {
background-image: url('/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: 50% 50%;
}이미지가 0% 0%에 있는 경우 왼쪽 상단 모서리가 요소의 왼쪽 상단 모서리에 배치됩니다. 패딩 영역. 이미지 위치가 100%인 경우 100%는 이미지의 오른쪽 하단 모서리를 오른쪽 여백의 오른쪽 하단 모서리에 배치합니다.
이미지를 가로로 2/3, 세로로 1/3 배치:
body {
background-image: url('/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: 66% 33%;
}백분율 값만 제공되는 경우 제공된 값은 가로 값, 세로 값으로 사용됩니다. 50%로 가정하겠습니다.
길이 값:길이 값은 요소 내부 여백 영역의 왼쪽 상단 모서리 오프셋을 설명합니다. 오프셋 지점은 이미지의 왼쪽 상단 모서리입니다. 比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。 css背景固定： background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。 属性值： scroll 默认。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 从父元素继承。 简写属性： background 属性在一个声明中设置所有背景属性。 如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。 相关文章推荐：body {
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
body {
background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}
위 내용은 CSS 배경 속성이란 무엇입니까? CSS 배경 속성 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!