CSS 배경 속성이란 무엇입니까? CSS 배경 속성 요약(코드 포함)

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 属性设置背景图片是否固定或随页面的其余部分滚动。

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

属性值：

• scroll 默认。背景图像会随着页面其余部分的滚动而移动。

• fixed 当页面的其余部分滚动时，背景图像不会移动。

• inherit 从父元素继承。

简写属性：

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

相关文章推荐：

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

위 내용은 CSS 배경 속성이란 무엇입니까? CSS 배경 속성 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!