css3中常用的背景屬性有哪幾個
- 青灯夜游原創
- 2022-01-12 17:49:254013瀏覽
常用背景屬性有：1、background-color；2、background-image；3、background-repeat；4、background-position；5、background-size；6、background。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在製作網頁時我們往往需要在網頁中加入一些背景顏色、背景圖片讓網頁更美觀，吸引訪客的目光。 CSS 中提供了一系列用於設定HTML 元素背景效果的屬性，如下所示：
【範例】使用background-color 為元素設定背景顏色：
運行結果如下圖所示：
圖：background-color 屬性示範
透過運行結果可以看出background-color 屬性能夠為元素設定純色的背景，這種顏色會填滿元素的內容、內邊距以及邊框區域（也可以理解為邊框及以內的所有區域），對於元素邊框以外的區域（外邊距）則沒有影響。
background-image 屬性的可選值如下：
###none######預設值，不顯示背景圖片############inherit######從父元素繼承背景圖片的設定###### ######
【示例】使用 background-image 属性将图片【
】设置为元素的背景图像：
运行结果如下图所示：
图：background-image 属性演示
背景图像的覆盖区域与背景颜色相同，同样会填充元素的内容、内边距以及边框区域，对于元素边框以外的区域（外边距）则没有影响。
【示例】使用 background-repeat 属性让背景图像只在水平方向上重复：
运行结果如下图所示：
图：background-repeat 属性演示
【示例】使用 background-position 属性来设置背景图像的位置：
运行结果如下图所示：
图：background-position 属性演示
【示例】使用 background-size 属性设置背景图像的尺寸，并将背景图像横向铺满整个元素区域：
运行结果如下图所示：
图：background-size 属性演示
【示例】通过 background 同时设置多个背景属性：
运行结果如下图所示：
图：background 属性演示
运行结果如下图所示：
图：多重背景层叠效果
- background-color：設定元素的背景顏色；
- background-image：設定元素的背景圖像；
- background-repeat：控制背景圖像是否重複；
- background-attachment：控制背景圖像是否跟隨視窗滾動；
- background-position：控制背景圖像在元素中的位置；
- background-size：設定背景圖像的尺寸；
- background-origin：設定background-position 屬性相對於什麼位置來定位背景圖像；
- background-clip：設定背景影像的顯示區域；
- background：背景屬性的縮寫，可以在一個宣告中設定所有的背景屬性。
1. background-color
您可以使用background-color 屬性為元素設定一個背景顏色，該屬性支援以下幾種屬性值：| 值 | 描述 |
|---|---|
| color_name | 使用特定顏色名稱為元素設定背景顏色（例如red） |
| hex_number | 使用十六進位碼為元素設定背景顏色（例如#ff0000） |
| rgb_number | 使用rgb() 函數為元素設定背景顏色（例如rgb(255,0,0)） |
| transparent | 預設值，設定背景顏色為透明，大多數情況下我們並不會用到它。但如果您不希望某個元素擁有背景顏色，或者不希望使用者對瀏覽器的設定（例如開啟夜間模式、護眼模式）影響到您的設計，那麼就可以使用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 屬性能夠為元素設定純色的背景，這種顏色會填滿元素的內容、內邊距以及邊框區域（也可以理解為邊框及以內的所有區域），對於元素邊框以外的區域（外邊距）則沒有影響。
2. background-image
background-image 用來為某個元素設定背景圖片，預設瀏覽器會從元素內容的左上角開始（若有內邊距則從元素內邊距區域的左上角開始），在水平和垂直方向上重複背景影像，以填滿整個元素區域，您可以使用background-repeat 屬性來控制背景影像是否重複或如何重複。background-image 屬性的可選值如下：
| #描述 | |
|---|---|
| ##url('URL') | 指向影像的路徑，可以將url() 看作是函數，括號中的URL 為影像的具體路徑 |
【示例】使用 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 属性用来设置背景图像是否重复或如何重复，该属性的可选值如下：| 值 | 描述 |
|---|---|
| repeat | 默认值，背景图像将在垂直方向和水平方向上重复 |
| repeat-x | 背景图像仅在水平方向上重复 |
| repeat-y | 背景图像仅在垂直方向上重复 |
| no-repeat | 背景图像仅显示一次，不在任何方向上重复 |
| inherit | 从父元素继承 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-position
background-position 属性用来设置背景图像的起始位置，该属性的可选值如下：| 值 | 描述 |
|---|---|
| left top（左上）、 left center（左中）、 left bottom（左下）、 right top（右上）、 right center（右中）、 right bottom（右下）、 center top（中上）、 center center（居中）、 center bottom（中下） |
使用一些关键词表示背景图像的位置，如果您仅设置第一个关键词，那么第二个将默认为 center |
| x% y% | 使用百分比表示背景图像距离元素左上角的距离，x% 为水平方向，y% 为垂直方向，左上角为 0% 0%，右下角是 100% 100%，如果您仅设置第一个值，那么另一个值将是 50%，默认值为 0% 0% |
| xpos ypos | 使用像素（px）或者其它 CSS 单位表示背景图像距离元素左上角的距离，xpos 为水平方向，ypos 为垂直方向，左上角为 0px 0px，右下角视元素的尺寸而定，百分比和单位的形式可以混用，如果您仅设置第一个值，那么另一个值将默认为 50% |
【示例】使用 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-size
background-size 属性用来设置背景图像的尺寸，该属性的可选值如下：| 值 | 描述 |
|---|---|
| xpos ypos | 使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动） |
| x% y% | 使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动） |
| cover | 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示 |
| contain | 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域 |
【示例】使用 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. background
background 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip在设置多个背景属性时，有以下几点需要注意：
- 每个属性之间使用空格进行分隔；
- 如果同时设置 background-position 和 background-size 属性，这两个属性之间需要使用斜线
/分隔，并且需要遵循 background-position 属性在前 background-size 属性在后的顺序； - 如果同时设置 background-origin 和 background-clip 属性，需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。如果 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 属性还支持设置多组属性值（比如上面示例中的 #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一组属性），每组属性值之间使用逗号,分隔。但需要注意的是 background-color 属性不能设置多个，并且只能在最后一组属性值中设置。
<!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
上一篇：CSS3設定動畫的相關屬性有哪些下一篇：CSS3設定動畫的相關屬性有哪些