일반적으로 사용되는 배경 속성은 1. 배경색, 2. 배경 이미지, 4. 배경 위치, 6. 배경입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
hex_number | 16진수 코드를 사용하여 요소의 배경색 설정(예: #ff0000) |
---|---|
rgb_number | 사용 요소 배경색을 설정하는 rgb() 함수 배경색(예: rgb(255,0,0)) |
transparent | 기본값, 배경색을 투명으로 설정합니다. 대부분의 경우 사용하지 않습니다. 그것. 그러나 특정 요소에 배경색을 지정하고 싶지 않거나 사용자의 브라우저 설정(예: 야간 모드, 눈 보호 모드 켜기)이 디자인에 영향을 미치는 것을 원하지 않는 경우 투명을 사용하여 설정할 수 있습니다. 색상을 투명하게 |
inherit | 상위 요소에서 배경색 설정을 상속합니다 |
[예] background-color를 사용하여 요소의 배경색을 설정합니다. | |
<!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: white; background-color: blue; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted yellow; /*设置一个宽 10px 的黄色虚线边框*/ } </style> </head> <body> <p id="bg">background-color 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: white; background-color: blue; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted yellow; /*设置一个宽 10px 的黄色虚线边框*/ } </style> </head> <body> <p id="bg">background-color 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 | 실행 결과는 다음과 같습니다. |
none | 기본값, 배경 이미지가 표시되지 않습니다 | |||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
inherit | 배경 이미지 설정 상속 상위 요소에서 | |||||||||||||||||||||||||||||
【示例】使用 background-image 属性将图片【 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: red; background-image: url('./bg-image.png'); margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-image 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: red; background-image: url('./bg-image.png'); margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-image 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 图:background-image 属性演示 背景图像的覆盖区域与背景颜色相同,同样会填充元素的内容、内边距以及边框区域,对于元素边框以外的区域(外边距)则没有影响。 3. background-repeat默认情况下背景图像会从元素内容的左上角开始(若有内边距则从元素内边距区域的左上角开始),在水平和垂直方向上重复背景图像以填充整个元素区域(不包括元素的外边距区域),您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复,该属性的可选值如下:
【示例】使用 background-repeat 属性让背景图像只在水平方向上重复: <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: black; background-image: url('./bg-image.png'); background-repeat: repeat-x; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-repeat 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: black; background-image: url('./bg-image.png'); background-repeat: repeat-x; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-repeat 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 ![]() 图:background-repeat 属性演示 4. background-positionbackground-position 属性用来设置背景图像的起始位置,该属性的可选值如下:
【示例】使用 background-position 属性来设置背景图像的位置: <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: black; background-image: url('./bg-image.png'); background-repeat: no-repeat; background-position: 0% 50%; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-position 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { color: black; background-image: url('./bg-image.png'); background-repeat: no-repeat; background-position: 0% 50%; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background-position 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 图:background-position 属性演示 5. background-sizebackground-size 属性用来设置背景图像的尺寸,该属性的可选值如下:
【示例】使用 background-size 属性设置背景图像的尺寸,并将背景图像横向铺满整个元素区域: <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> body { background-image: url('./bg-image.png'); background-repeat: repeat-x; background-size: contain; } </style> </head> <body> <p>background-size 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> body { background-image: url('./bg-image.png'); background-repeat: repeat-x; background-size: contain; } </style> </head> <body> <p>background-size 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 图:background-size 属性演示 6. backgroundbackground 是背景属性的简写形式,通过它不仅可以为元素设置某个背景属性,还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序,但推荐使用如下顺序进行设置:background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip 로그인 후 복사
【示例】通过 background 同时设置多个背景属性: <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> #bg { background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box; margin: 20px; /*设置外边距为 20px*/ padding: 20px; /*设置内边距为 20px*/ border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/ } </style> </head> <body> <p id="bg">background 属性</p> </body> </html> 로그인 후 복사 로그인 후 복사 图:background 属性演示 background 属性还支持设置多组属性值(比如上面示例中的 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> body { background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box, url("./css.png") 50px 30px/120px 120px no-repeat content-box, url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a; } </style> </head> <body> </body> </html> 로그인 후 복사 로그인 후 복사 <!DOCTYPE html> <html> <head> <title>CSS背景</title> <style> body { background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box, url("./css.png") 50px 30px/120px 120px no-repeat content-box, url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a; } </style> </head> <body> </body> </html> 로그인 후 복사 로그인 후 복사 图:多重背景层叠效果 (学习视频分享:css视频教程) |
위 내용은 CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!