整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css屬性</title>
<style>
<!-- p{ -->
<!-- color: #FF0000; -->
<!-- font-size: 30px; -->
<!-- text-align: center; -->
<!-- line-height: 200px; -->
<!-- /* -->
<!-- border 邊框 -->
<!-- */ -->
<!-- border: 1px solid red; -->
<!-- } -->
div{
border: 1px solid red;
/*
尺寸
*/
height: 1482px;
width: 1000px;
/*
背景
*/
background: url("image/1.jpg") no-repeat center;
}
p{
color:red;
font-size:13px;
font-family:'楷體';
}
</style>
</head>
<body>
<!-- <p>你好</P> -->
<div><p>你是我得不到的女孩</p>
</div>
</body>
</html>SS 背景屬性用于定義HTML元素的背景。
CSS 屬性定義背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景顏色
background-color 屬性定義了元素的背景顏色.
頁面的背景顏色使用在body的選擇器中:
實例
body {background-color:#b0c4de;}
CSS中，顏色值通常以以下方式定義:
十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"
以下實例中, h1, p, 和 div 元素擁有不同的背景顏色:
實例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景圖像
background-image 屬性描述了元素的背景圖像.
默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體.
頁面背景圖片設置實例:
實例
body {background-image:url('paper.gif');}
嘗試一下 ?
下面是一個例子是一個糟糕的文字和背景圖像組合。文本可讀性差:
實例
body {background-image:url('bgdesert.jpg');}
背景圖像 - 水平或垂直平鋪
默認情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。
一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協調，如下所示:
實例
body
{
background-image:url('gradient2.png');
}
如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:
實例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景圖像- 設置定位與不平鋪
讓背景圖像不影響文本的排版
如果你不想讓圖像平鋪，你可以使用 background-repeat 屬性:
實例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上實例中，背景圖像與文本顯示在同一個位置，為了讓頁面排版更加合理，不影響文本的閱讀，我們可以改變圖像的位置。
可以利用 background-position 屬性改變圖像在背景中的位置:
實例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 簡寫屬性
在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。
為了簡化這些屬性的代碼，我們可以將這些屬性合并在同一個屬性中.
背景顏色的簡寫屬性為 "background":
實例
body {background:#ffffff url('img_tree.png') no-repeat right top;}
嘗試一下 ?
當使用簡寫屬性時，屬性值的順序為：:
background-color
background-image
background-repeat
background-attachment
background-position
以上屬性無需全部使用，你可以按照頁面的實際需要使用.
這個實例使用了先前介紹的CSS，你可以查看相應實例: CSS 實例
更多實例
如何設置固定的背景圖像
本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。
CSS 背景屬性
| Property | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中。 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動。 |
| background-color | 設置元素的背景顏色。 |
| background-image | 把圖像設置為背景。 |
| background-position | 設置背景圖像的起始位置。 |
| background-repeat | 設置背景圖像是否及如何重復。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
篇文章結合上一篇所講到的CSS3技術中有關背景的屬性，制作一個實例。小海前端（頭條號）帶領大家一同實現一個漂亮的信紙背景效果。
承接文章：更加強大的背景圖像，CSS3增強的背景效果，前端對背景的優化
技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
一、信紙背景實例效果：
本篇文章所實現的信紙背景效果如下圖所示。
信紙背景實例的最終效果圖
首先要明確一點：上圖中看到的除了文字以外的背景部分，并不是一張完整的背景圖片，而是由多個具有透明背景的png圖片利用CSS3的多重背景拼接出來的。
本實例所使用到的素材圖片如下圖所示。
用到的素材圖片
從上圖中可以看出，我們一共使用了六張素材圖片。前五張圖片都是png格式，背景為透明。最后一張圖片是一個紋理jpg圖片，可以隨意設置透明效果的紋理。
left-bottom.png，實現左下角的花邊效果。
left-top.png，實現左上角的花邊效果。
right-bottom.png，實現右下角的花邊效果。
right-top.png實現右上角的花邊效果。
line.png，實現信紙的水平線格子效果
wenli.jpg，實現信紙的背景紋理效果。
跟著小海前端（頭條號）學的小伙伴們，可以自行在網上搜索圖片，利用Photoshop制作成素材的樣子，大家可以發揮自己的設計頭腦，制作出各種不同的信紙效果。
二、頁面布局：
這個實例的頁面布局非常簡單，制作一個<div></div>標記對作為容器，并將該容器的id屬性的取值設置為mail。然后在容器內部放置<h1></h1>標記對作為標題，信件的正文使用<p></p>標記對進行包裹即可。
HTML代碼結構如下所示。
<div id="mail">
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>
三、利用CSS設置#mail的常規屬性：
為了便于查看，可以設置#mail的CSS樣式。設置該容器的寬度為400像素，高度為600像素。并設置容器在頁面內居中顯示。將容器的填充寬度設置為50像素，并在容器外部添加一個10像素的深紅色邊框線。
最后調整內部文字的CSS樣式。包括文字的字號設置為14像素，首行縮進為28像素，行高為27像素。當然也可以根據水平線格子的間隔高度自行調整上述參數。
CSS代碼如下所示。
#mail{
width:400px; height:600px;
margin:0 auto;
padding:50px;
border:solid 10px rgba(132,26,26,0.8);
font-size: 14px;
line-height: 27px;
text-indent: 28px;
}
四、加載背景圖片：
接下來我們要為#mail加載背景圖片，這需要將素材圖片中準備的所有png圖片和wenli.jpg圖片全部加載到該容器中作為背景。
CSS3中的background-image已經支持多背景圖片的功能，只需要將多個圖片的url()路徑之間利用逗號隔開即可。一定要注意：必須是逗號進行間隔。
CSS代碼如下所示。
background-image: url(../images/line.png),
url(../images/left-top.png),
url(../images/left-bottom.png),
url(../images/right-top.png),
url(../images/right-bottom.png),
url(../images/wenli.jpg);
五、設置多背景圖片的背景屬性：
下一步需要設置多背景圖片的其他背景屬性。這需要根據background-image屬性加載背景圖片的順序來完成其他背景屬性的設置。
這里需要注意，上一步的代碼中顯示，第一個加載的是水平線格子圖片line.png，接下來一次加載的是左上角花邊、左下角花邊、右上角花邊、右下角花邊，最后是紋理圖片wenli.jpg。
1、設置背景圖片的平鋪方式：
我們知道：第一個加載的水平線格子圖片應該平鋪；四個方向角的花邊圖片不應該平鋪；紋理圖片應該平鋪。
因此根據背景圖片的加載順序可以書寫成如下格式：
background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
大家仔細觀察，所有的平鋪取值都是使用逗號隔開的，而且共有6個平鋪取值，正好對應background-image屬性中加載的六張圖片的順序。
2、設置背景圖片的定位：
這里使用background-position屬性來設置背景圖片的定位。
第一個加載的水平線格子圖片因為平鋪，所以位置可以從容器的左上角就開始顯示。因此取值為left top。
左上角花邊應該顯示在左上角，即left top。
左下角花邊應該顯示在左下角，即left bottom。
右上角花邊應該顯示在右上角，即right top。
右下角花邊應該顯示在右下角，即right bottom。
最后一個加載的紋理圖片因為也平鋪，所以也從左上角開始顯示。
CSS代碼如下所示：
background-position: left top,left top,left bottom,right top,right bottom,left top;
3、設置圖片的大小：
這里可以根據背景圖片本身的大小進行適當的縮放。
CSS代碼如下所示：
background-size: 50px,20%,20%,20%,20%,50px;
屬性background-size原本需要指定兩個數值來表示寬度和高度的大小變化。若只指定了一個數值，則寬度和高度均采用該數值來對圖片進行縮放。
4、設置圖片顯示的原點坐標：
這里只有水平線格子圖片和紋理圖片的顯示需要調整原點坐標。
水平線格子只出現在由文本內容的部分，因此設置為content-box，從文本區域開始顯示。
紋理圖片可以設置為padding-box，即從填充區域開始顯示。
其他圖片都設置為border-box，即從邊框開始顯示。
CSS代碼如下所示。
background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;
5、設置圖片的顯示區域：
每張圖片的顯示區域都從所設置的原點坐標就開始顯示，因此取值與原點坐標的取值是相同的。
CSS代碼如下所示。
background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;
六、整個實例的完整CSS代碼：
本篇文章帶領大家所制作的信紙背景效果的完整CSS代碼如下圖所示。
完整的CSS代碼
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
下一篇文章中，小海前端（頭條號）會為小伙伴們繼續介紹CSS3新增的屬性值。下一篇文章介紹CSS3的邊框屬性功能。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
