HTML邊距和背景圖片的設(shè)置


<!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中，顏色值通常以以下方式定義:

十六進(jìn)制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"

以下實例中, h1, p, 和 div 元素?fù)碛胁煌谋尘邦伾?

實例

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

背景圖像

background-image 屬性描述了元素的背景圖像.

默認(rèn)情況下，背景圖像進(jìn)行平鋪重復(fù)顯示，以覆蓋整個元素實體.

頁面背景圖片設(shè)置實例:

實例

body {background-image:url('paper.gif');}

嘗試一下 ?

下面是一個例子是一個糟糕的文字和背景圖像組合。文本可讀性差:

實例

body {background-image:url('bgdesert.jpg');}

背景圖像 - 水平或垂直平鋪

默認(rèn)情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協(xié)調(diào)，如下所示:

實例

body

{

background-image:url('gradient2.png');

}

如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:

實例

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

背景圖像- 設(shè)置定位與不平鋪

讓背景圖像不影響文本的排版

如果你不想讓圖像平鋪，你可以使用 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;}

嘗試一下 ?

當(dāng)使用簡寫屬性時，屬性值的順序為：:

background-color
background-image
background-repeat
background-attachment
background-position

以上屬性無需全部使用，你可以按照頁面的實際需要使用.

這個實例使用了先前介紹的CSS，你可以查看相應(yīng)實例: CSS 實例

更多實例

如何設(shè)置固定的背景圖像

本例演示如何設(shè)置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。

CSS 背景屬性

Property	描述
background	簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。
background-attachment	背景圖像是否固定或者隨著頁面的其余部分滾動。
background-color	設(shè)置元素的背景顏色。
background-image	把圖像設(shè)置為背景。
background-position	設(shè)置背景圖像的起始位置。
background-repeat	設(shè)置背景圖像是否及如何重復(fù)。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

篇文章結(jié)合上一篇所講到的CSS3技術(shù)中有關(guān)背景的屬性，制作一個實例。小海前端（頭條號）帶領(lǐng)大家一同實現(xiàn)一個漂亮的信紙背景效果。

承接文章：更加強大的背景圖像，CSS3增強的背景效果，前端對背景的優(yōu)化

技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。

希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

一、信紙背景實例效果：

本篇文章所實現(xiàn)的信紙背景效果如下圖所示。

信紙背景實例的最終效果圖

首先要明確一點：上圖中看到的除了文字以外的背景部分，并不是一張完整的背景圖片，而是由多個具有透明背景的png圖片利用CSS3的多重背景拼接出來的。

本實例所使用到的素材圖片如下圖所示。

用到的素材圖片

從上圖中可以看出，我們一共使用了六張素材圖片。前五張圖片都是png格式，背景為透明。最后一張圖片是一個紋理jpg圖片，可以隨意設(shè)置透明效果的紋理。

left-bottom.png，實現(xiàn)左下角的花邊效果。
left-top.png，實現(xiàn)左上角的花邊效果。
right-bottom.png，實現(xiàn)右下角的花邊效果。
right-top.png實現(xiàn)右上角的花邊效果。
line.png，實現(xiàn)信紙的水平線格子效果
wenli.jpg，實現(xiàn)信紙的背景紋理效果。

跟著小海前端（頭條號）學(xué)的小伙伴們，可以自行在網(wǎng)上搜索圖片，利用Photoshop制作成素材的樣子，大家可以發(fā)揮自己的設(shè)計頭腦，制作出各種不同的信紙效果。

二、頁面布局：

這個實例的頁面布局非常簡單，制作一個<div></div>標(biāo)記對作為容器，并將該容器的id屬性的取值設(shè)置為mail。然后在容器內(nèi)部放置<h1></h1>標(biāo)記對作為標(biāo)題，信件的正文使用<p></p>標(biāo)記對進(jìn)行包裹即可。

HTML代碼結(jié)構(gòu)如下所示。

<div id="mail">
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>

三、利用CSS設(shè)置#mail的常規(guī)屬性：

為了便于查看，可以設(shè)置#mail的CSS樣式。設(shè)置該容器的寬度為400像素，高度為600像素。并設(shè)置容器在頁面內(nèi)居中顯示。將容器的填充寬度設(shè)置為50像素，并在容器外部添加一個10像素的深紅色邊框線。

最后調(diào)整內(nèi)部文字的CSS樣式。包括文字的字號設(shè)置為14像素，首行縮進(jìn)為28像素，行高為27像素。當(dāng)然也可以根據(jù)水平線格子的間隔高度自行調(diào)整上述參數(shù)。

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加載背景圖片，這需要將素材圖片中準(zhǔn)備的所有png圖片和wenli.jpg圖片全部加載到該容器中作為背景。

CSS3中的background-image已經(jīng)支持多背景圖片的功能，只需要將多個圖片的url()路徑之間利用逗號隔開即可。一定要注意：必須是逗號進(jìn)行間隔。

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);

五、設(shè)置多背景圖片的背景屬性：

下一步需要設(shè)置多背景圖片的其他背景屬性。這需要根據(jù)background-image屬性加載背景圖片的順序來完成其他背景屬性的設(shè)置。

這里需要注意，上一步的代碼中顯示，第一個加載的是水平線格子圖片line.png，接下來一次加載的是左上角花邊、左下角花邊、右上角花邊、右下角花邊，最后是紋理圖片wenli.jpg。

1、設(shè)置背景圖片的平鋪方式：

我們知道：第一個加載的水平線格子圖片應(yīng)該平鋪；四個方向角的花邊圖片不應(yīng)該平鋪；紋理圖片應(yīng)該平鋪。

因此根據(jù)背景圖片的加載順序可以書寫成如下格式：

background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;

大家仔細(xì)觀察，所有的平鋪取值都是使用逗號隔開的，而且共有6個平鋪取值，正好對應(yīng)background-image屬性中加載的六張圖片的順序。

2、設(shè)置背景圖片的定位：

這里使用background-position屬性來設(shè)置背景圖片的定位。

第一個加載的水平線格子圖片因為平鋪，所以位置可以從容器的左上角就開始顯示。因此取值為left top。
左上角花邊應(yīng)該顯示在左上角，即left top。
左下角花邊應(yīng)該顯示在左下角，即left bottom。
右上角花邊應(yīng)該顯示在右上角，即right top。
右下角花邊應(yīng)該顯示在右下角，即right bottom。
最后一個加載的紋理圖片因為也平鋪，所以也從左上角開始顯示。

CSS代碼如下所示：

background-position: left top,left top,left bottom,right top,right bottom,left top;

3、設(shè)置圖片的大小：

這里可以根據(jù)背景圖片本身的大小進(jìn)行適當(dāng)?shù)目s放。

CSS代碼如下所示：

background-size: 50px,20%,20%,20%,20%,50px;

屬性background-size原本需要指定兩個數(shù)值來表示寬度和高度的大小變化。若只指定了一個數(shù)值，則寬度和高度均采用該數(shù)值來對圖片進(jìn)行縮放。

4、設(shè)置圖片顯示的原點坐標(biāo)：

這里只有水平線格子圖片和紋理圖片的顯示需要調(diào)整原點坐標(biāo)。

水平線格子只出現(xiàn)在由文本內(nèi)容的部分，因此設(shè)置為content-box，從文本區(qū)域開始顯示。
紋理圖片可以設(shè)置為padding-box，即從填充區(qū)域開始顯示。
其他圖片都設(shè)置為border-box，即從邊框開始顯示。

CSS代碼如下所示。

background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;

5、設(shè)置圖片的顯示區(qū)域：

每張圖片的顯示區(qū)域都從所設(shè)置的原點坐標(biāo)就開始顯示，因此取值與原點坐標(biāo)的取值是相同的。

CSS代碼如下所示。

background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;

六、整個實例的完整CSS代碼：

本篇文章帶領(lǐng)大家所制作的信紙背景效果的完整CSS代碼如下圖所示。

完整的CSS代碼

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。

文章預(yù)告

下一篇文章中，小海前端（頭條號）會為小伙伴們繼續(xù)介紹CSS3新增的屬性值。下一篇文章介紹CSS3的邊框?qū)傩怨δ堋?/p>

在線咨詢

上一篇：Java對圖片Base64轉(zhuǎn)碼-HTML對Base64解碼「Java加強版」
下一篇：HTML中表格的實例應(yīng)用

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML邊距和背景圖片的設(shè)置

希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

小海聲明

關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。

文章預(yù)告

您的項目需求