CSS 스타일의 배경 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 스타일의 배경 속성에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-15 11:01:36

원래의

1877명이 탐색했습니다.

배경 자세한 사용법 설명:

1. 배경색 속성요소의 배경색 설정

가능한 값

color_name 색상 값이 색상 이름의 배경색(예: 빨간색)임을 지정합니다.

hex_number 색상 값이 16진수 값임을 지정합니다. 배경색(예: #ff0000)

🎜>기본 배경색은 투명2,

배경 이미지

속성 세트 요소의 배경이미지

가능한 값 단일 배경 이미지: background-image:url(a.png) 여러 배경 이미지: background-image:url(a.png),url(b.png)

선형 그라데이션: background-image:-webkit (-repeating)-linear-gradient(방향, 색상 값(픽셀 또는 백분율), 색상 값(픽셀 또는 백분율...)

오른쪽

위

아래

,90 180도 ~ ,0) 2px 방사형 그라데이션: background-image:-webkit(-repeating)-radial-gradient([position> || ,] ? [ || ,]? [, ]*) -위치> 기본값은 중앙

~ 포함 또는 포함

3. 배경 크기 속성은 배경 이미지의 크기를 재설정하는 데 사용됩니다

. 라벨 요소에 맞게 배경 이미지

표지: 배경 이미지가 확대되어 라벨 요소 전체 크기로 확장됩니다.

픽셀: 배경 이미지의 크기를 나타냅니다. 확대

백분율: 백분율은 이미지 크기를 조정하는 콘텐츠 태그 요소의 크기를 기준으로 합니다4.

배경 위치

속성은 배경 이미지 위치를 설정하는 데 사용됩니다

가능한 값: 왼쪽, 오른쪽, 위쪽, 아래쪽, 중앙, 픽셀, 백분율

5 ,

Background-repeat

속성은 배경 이미지의 위치를 설정하는 데 사용됩니다

가능한 값: 반복, 반복-x, 반복-y, 반복 없음, 공백(잘리지 않거나 크기가 조정되지 않음) ), 라운드(잘리지 않지만 이미지 크기가 변경됨) 6 .

Background-attachment

속성은 배경 이미지의 스크롤 가능 여부를 설정하는 데 사용됩니다.

가능한 값: 스크롤, 고정7,

배경 클립

속성은 배경의 그리기 영역을 지정하는 데 사용됩니다

가능한 값: border-box,

padding

-box, content-box

8. background-origin 속성은

을 기준으로 background-position 속성의 위치를 지정하는 데 사용됩니다. 가능한 값: border-box, padding-box, content- box확장: 사각형 그리기html 코드

<p>使用背景绘制方格，使每个文字都在方格里，效果图如下。</p>

로그인 후 복사

css 코드

 p {
     width: 300px;
     height: 300px;
     border-left: 3px solid pink;
     border-top: 3px solid pink;
     background-image: -webkit-linear-gradient(180deg, pink 3px, transparent 3px) , -webkit-linear-gradient(90deg, pink 3px, transparent 3px);
     background-size: 30px;
     line-height: 30px;
     font-size:25px;
     letter-spacing: 5px;    
}

로그인 후 복사