CSS의 배경 사용에 대한 간략한 분석

이 글의 내용은 CSS의 배경 사용법에 대한 간략한 분석입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

정의 및 사용법

기본 속성: 색상, 이미지, 위치, 반복

배경색배경색background-color

值为颜色值或transparent二者选其一,默认值是transparent（透明）。

• 颜色值可以为16进制颜色码或者RGB颜色值，也可以是英文代码。不建议使用英文代码，不同浏览器对不同颜色代码处理的效果有可能不同。

• 设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持，而背景梯度等更奇异的特性只在较新的浏览器中得到支持，加上背景图像可能由于某种原因无法加载。因此，设置基本的背景颜色和指定这些特性是一个好主意，因此无论如何，元素的内容都是可读的。

背景图像 background-image

指定显示的背景图片，用url()设置路径。

• 默认的图片重复方式为水平垂直皆重复。

背景重复 background-repeat

指定背景图像如何重复的，默认值是repeat（一直重复，直到整个元素的背景被填充）

值	描述
no-repeat	不重复
repeat	垂直和水平都重复
repeat-x	X轴方向（水平）重复
repeat-y	Y轴方向（垂直）重复

背景位置 background-position

指定定位背景图片的位置，原点为左上角（0,0）。

• 可输入两个值代表 X 轴和 Y 轴，也可以只输入一个值。

• 可输入长度值（px等）、相对值（rem等）、百分比、关键字（left，center，right,top，bottom）

• 若只输入一个值，则代表 X 轴的值，Y 轴变成center

• 值可以混搭，如background-position:9px top;

额外属性

背景滚动 background-attachment값은 색상 값이거나 transparent입니다. 기본값은 transparent(투명)입니다.

• 색상 값은 16진수 색상 코드 또는 RGB 색상 값이거나 영어 코드일 수 있습니다. 영어 코드를 사용하는 것은 권장되지 않습니다. 브라우저에 따라 색상 코드에 따라 효과가 달라질 수 있습니다.

• 배경색을 대체 색상으로 설정하는 것도 중요합니다. 배경 색상은 모든 곳에서 지원되지만 배경 그라데이션과 같은 보다 이국적인 기능은 최신 브라우저에서만 지원되며 배경 이미지는 어떤 이유로 로드되지 않을 수 있습니다. 따라서 기본 배경색을 설정하고 이러한 속성을 지정하여 어떤 경우에도 요소의 내용을 읽을 수 있도록 하는 것이 좋습니다. 배경 이미지 background-image
  Backgroundpeat background-repeat배경 이미지가 반복되는 방식을 지정합니다. 기본값은 반복 (전체 요소의 배경이 채워질 때까지 반복) description반복 없음

  표시할 배경 이미지를 지정하고, url( )경로를 설정합니다.	기본 이미지 반복 방법은 가로, 세로 모두 반복하는 것입니다.
  	value

  반복 없음

  반복

  세로 및 가로 모두 반복
  #🎜🎜##🎜🎜#repeat-x#🎜🎜##🎜🎜#X축 방향(가로)으로 반복 #🎜🎜# #🎜🎜##🎜🎜##🎜🎜#repeat-y#🎜🎜##🎜🎜#Y축 방향(세로) 반복#🎜🎜##🎜🎜##🎜🎜##🎜🎜 ##🎜🎜# 배경 위치 background-position#🎜🎜#배경 이미지의 위치를 ​​지정하며, 원점은 왼쪽 상단(0,0)입니다. #🎜🎜#
  • #🎜🎜#X축과 Y축을 표현하기 위해 두 개의 값을 입력할 수도 있고, 하나의 값만 입력할 수도 있습니다. #🎜🎜#
  • #🎜🎜#길이 값(px 등), 상대 값(rem 등), 백분율, 키워드(왼쪽)를 입력할 수 있습니다. 코드>, 가운데, 오른쪽, 상단, 하단) #🎜🎜#
  • #🎜🎜#하나의 값만 입력하면 ;#🎜🎜#
  #🎜🎜#추가 속성#🎜🎜##🎜🎜#배경 스크롤Background-attachment#🎜🎜##🎜🎜 #콘텐츠가 스크롤될 때 배경이 스크롤되는 방식을 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#값#🎜🎜##🎜🎜#description#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#scroll#🎜🎜##🎜🎜#기본값입니다. 스크롤: 페이지가 스크롤될 때 배경 이미지가 이동합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#fixed#🎜🎜##🎜🎜# 페이지의 나머지 부분을 스크롤할 때 배경 이미지가 움직이지 않도록 수정되었습니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#CSS의 테두리 크기 속성 사용#🎜🎜##🎜🎜 ##🎜🎜##🎜🎜#

위 내용은 CSS의 배경 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!