CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?
- 青灯夜游원래의
- 2022-01-12 17:49:254027검색
일반적으로 사용되는 배경 속성은 1. 배경색, 2. 배경 이미지, 4. 배경 위치, 6. 배경입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
웹페이지를 만들 때 웹페이지를 더욱 아름답게 만들고 방문자의 관심을 끌기 위해 배경색과 배경 이미지를 웹페이지에 추가해야 하는 경우가 많습니다. CSS는 HTML 요소의 배경 효과를 설정하기 위해 다음과 같은 일련의 속성을 제공합니다.
특정 색상 이름을 가진 요소의 배경색 설정(예: 빨간색)
그림: background-color 속성 데모
값
설명
url('URL')
이미지를 가리키는 경로는 다음과 같습니다. url()을 함수로 생각하세요. 괄호 안의 URL은 이미지의 특정 경로입니다
- 배경색: 요소의 배경색을 설정합니다.
- 배경 이미지: 요소의 배경 이미지를 설정합니다. -repeat : 배경 이미지가 반복되는지 여부를 제어합니다.
- background-attachment: 배경 이미지가 창과 함께 스크롤되는지 여부를 제어합니다.
- background-position: 요소에서 배경 이미지의 위치를 제어합니다. 배경 이미지의 크기를 설정합니다.
- 배경 이미지 위치를 기준으로 background-position 속성을 설정합니다.
- 배경 클립: 배경 이미지의 표시 영역을 설정합니다. : 배경 속성의 약어로, 하나의 명령문으로 모든 배경 속성을 설정할 수 있습니다.
- 1. background-color 속성을 사용하여 요소의 배경색을 설정할 수 있습니다. 이 속성은 다음 속성 값을 지원합니다.
- value
특정 색상 이름을 가진 요소의 배경색 설정(예: 빨간색)
| 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> | 실행 결과는 다음과 같습니다. |
그림: background-color 속성 데모
실행 결과에서 볼 수 있듯이 background-color 속성은 요소에 대해 단색 배경을 설정할 수 있습니다. 요소의 내용, 패딩 및 테두리 영역(또한 테두리 및 그 안에 있는 모든 영역으로 이해될 수 있음)을 채우고 요소 테두리 외부 영역(여백)에는 영향을 미치지 않습니다.
Background-image 속성의 선택 값 은 다음과 같습니다:
배경 이미지는 요소의 배경 이미지를 설정하는 데 사용됩니다. 기본적으로 브라우저는 요소 콘텐츠의 왼쪽 상단에서 시작됩니다(패딩이 있는 경우 상단에서 시작됩니다). 요소 패딩 영역의 왼쪽 모서리 시작), 배경 이미지를 가로 및 세로로 반복하여 전체 요소 영역을 채우고, background-repeat 속성을 사용하여 배경 이미지의 반복 여부 및 방법을 제어할 수 있습니다.
설명
url('URL')
이미지를 가리키는 경로는 다음과 같습니다. url()을 함수로 생각하세요. 괄호 안의 URL은 이미지의 특정 경로입니다
| 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> 图：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> 图：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> 图：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> 图：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> 图：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> 图：多重背景层叠效果 （学习视频分享：css视频教程） |
위 내용은 CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.