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

배경 자세한 사용법 설명:

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([d6d2a6cd6cf8e8163d8bac5a9b67fc8a || 0c0cb308ee3d2ee3281772bfc9b806c2 ,] ? [ || ,]? [, ]*)                       -위치> 기본값은 중앙

                                                                                             ~                      포함 또는 포함

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 코드

e388a4556c0f65e1904146cc1a846bee使用背景绘制方格，使每个文字都在方格里，效果图如下。94b3e26ee717c64999d7867364b1b4a3

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;    
}

결과

배경을 이용하여 각 텍스트가 사각형 안에 들어가도록 사각형을 그려보세요. 효과는 다음과 같습니다.

위 내용은 CSS 스타일의 배경 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!