背景
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性沾谜，作用是將背景屬性設(shè)置在一個(gè)聲明中。 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)胀莹。 |
| background-color | 設(shè)置元素的背景顏色基跑。 |
| background-image | 把圖像設(shè)置為背景。 |
| background-position | 設(shè)置背景圖像的起始位置描焰。 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)媳否。 |
第一個(gè)例子
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="css" contenteditable="true" cid="n26" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-color: red
}
div{
widows:50px;
height:50px;
background-color:blue
}
</style>
</head>
<body>
<div> </div>
</body>
</html></pre>
可以看到主體的顏色是red, 其中一部分是blue
第二個(gè)例子
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="css" contenteditable="true" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
/background-color: red/
background-image: url("https://wx3.sinaimg.cn/mw690/719f9f6bly1g5p3mpvkxmj21w02ioqv5.jpg");
/圖片居中/
background-position: center;
/圖片不重復(fù)/
background-repeat: no-repeat;
}
/div{
widows:50px;
height:50px;
background-color:blue
}/
</style>
</head>
<body>
<div> </div>
</body>
</html></pre>
可以寫成一句話
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="css" contenteditable="true" cid="n35" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> background: url("https://wx3.sinaimg.cn/mw690/719f9f6bly1g5p3mpvkxmj21w02ioqv5.jpg") center no-repeat</pre>
背景屬性
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中荆秦。 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)篱竭。 |
| background-color | 設(shè)置元素的背景顏色。 |
| background-image | 把圖像設(shè)置為背景步绸。 |
| background-position | 設(shè)置背景圖像的起始位置室抽。 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 |
