整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS 背景屬性用于定義HTML元素的背景。
CSS 屬性定義背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景顏色
background-color 屬性定義了元素的背景顏色.
頁(yè)面的背景顏色使用在body的選擇器中:
實(shí)例
body {background-color:#b0c4de;}
CSS中，顏色值通常以以下方式定義:
十六進(jìn)制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"
以下實(shí)例中, h1, p, 和 div 元素?fù)碛胁煌谋尘邦伾?
實(shí)例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景圖像
background-image 屬性描述了元素的背景圖像.
默認(rèn)情況下，背景圖像進(jìn)行平鋪重復(fù)顯示，以覆蓋整個(gè)元素實(shí)體.
頁(yè)面背景圖片設(shè)置實(shí)例:
實(shí)例
body {background-image:url('paper.gif');}
嘗試一下 ?
下面是一個(gè)例子是一個(gè)糟糕的文字和背景圖像組合。文本可讀性差:
實(shí)例
body {background-image:url('bgdesert.jpg');}
背景圖像 - 水平或垂直平鋪
默認(rèn)情況下 background-image 屬性會(huì)在頁(yè)面的水平或者垂直方向平鋪。
一些圖像如果在水平方向與垂直方向平鋪，這樣看起來(lái)很不協(xié)調(diào)，如下所示:
實(shí)例
body
{
background-image:url('gradient2.png');
}
如果圖像只在水平方向平鋪 (repeat-x), 頁(yè)面背景會(huì)更好些:
實(shí)例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景圖像- 設(shè)置定位與不平鋪
讓背景圖像不影響文本的排版
如果你不想讓圖像平鋪，你可以使用 background-repeat 屬性:
實(shí)例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上實(shí)例中，背景圖像與文本顯示在同一個(gè)位置，為了讓頁(yè)面排版更加合理，不影響文本的閱讀，我們可以改變圖像的位置。
可以利用 background-position 屬性改變圖像在背景中的位置:
實(shí)例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 簡(jiǎn)寫屬性
在以上實(shí)例中我們可以看到頁(yè)面的背景顏色通過(guò)了很多的屬性來(lái)控制。
為了簡(jiǎn)化這些屬性的代碼，我們可以將這些屬性合并在同一個(gè)屬性中.
背景顏色的簡(jiǎn)寫屬性為 "background":
實(shí)例
body {background:#ffffff url('img_tree.png') no-repeat right top;}
嘗試一下 ?
當(dāng)使用簡(jiǎn)寫屬性時(shí)，屬性值的順序?yàn)椋?
background-color
background-image
background-repeat
background-attachment
background-position
以上屬性無(wú)需全部使用，你可以按照頁(yè)面的實(shí)際需要使用.
這個(gè)實(shí)例使用了先前介紹的CSS，你可以查看相應(yīng)實(shí)例: CSS 實(shí)例
更多實(shí)例
如何設(shè)置固定的背景圖像
本例演示如何設(shè)置固定的背景圖像。圖像不會(huì)隨著頁(yè)面的其他部分滾動(dòng)。
CSS 背景屬性
| Property | 描述 |
|---|---|
| background | 簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。 |
| background-attachment | 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。 |
| background-color | 設(shè)置元素的背景顏色。 |
| background-image | 把圖像設(shè)置為背景。 |
| background-position | 設(shè)置背景圖像的起始位置。 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
片
當(dāng)我們?cè)谥谱黜?yè)面的時(shí)候，通常會(huì)遇到圖片的三種表現(xiàn)形式，如下：
1、內(nèi)容圖片
內(nèi)容圖片是頁(yè)面中真正的內(nèi)容，沒(méi)有內(nèi)容圖片，就無(wú)法完整的理解頁(yè)面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁(yè)的一部分，它們能幫助你決定這個(gè)頁(yè)面的內(nèi)容是否是你需要的。
內(nèi)容圖片
2、布局圖片
布局圖片出現(xiàn)在頁(yè)面背景中，要想理解頁(yè)面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個(gè)圖片，沒(méi)有這個(gè)圖片也能理解頁(yè)面上文字描述的內(nèi)容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來(lái)的圖片會(huì)給你瀏覽頁(yè)面的時(shí)候帶來(lái)一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購(gòu)物車圖片可以看到選購(gòu)的產(chǎn)品，箭頭圖片點(diǎn)擊可以看到更詳細(xì)的產(chǎn)品等。
交互圖片
在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。
<img src="" alt="">
內(nèi)容圖片
布局圖片是在CSS中被創(chuàng)建出來(lái)的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設(shè)置背景圖片時(shí)，要始終設(shè)置背景顏色，確保背景圖片沒(méi)有成功時(shí)會(huì)顯示一個(gè)背景顏色
2）background-image 可以指向一個(gè)相對(duì)路徑或者絕對(duì)路徑來(lái)添加圖片。
3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個(gè)關(guān)鍵字：
4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個(gè)關(guān)鍵字，如：
background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個(gè)關(guān)鍵字可以是top、center、bottom，第二個(gè)關(guān)鍵字可以是left、center、right
CSS中和背景相關(guān)的屬性可以簡(jiǎn)寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡(jiǎn)寫就盡量用簡(jiǎn)寫，簡(jiǎn)寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復(fù)雜圖像
2）png最適合展示網(wǎng)頁(yè)插畫、logo和網(wǎng)頁(yè)小圖標(biāo)
3）gif適合展示網(wǎng)頁(yè)插畫、logo和網(wǎng)頁(yè)小圖標(biāo)
建議：
一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁(yè)添加用戶交互圖片；推薦把用戶交互圖片放在同一個(gè)文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：
交互圖片
交互圖片
具體如何操作呢？后續(xù)教頭會(huì)通過(guò)視頻給大家詳細(xì)演示，請(qǐng)繼續(xù)關(guān)注。
ody 的背景圖設(shè)置
第一種 :這種情況下背景圖片可以縮放 但是不能完全等比縮放
background: url(imgs/1.jpg)no-repeat;
background-position:center 0; 背景圖的定位原點(diǎn),由于body高不確定
background-attachment:fixed; 背景圖片保持固定,不會(huì)隨頁(yè)面滾動(dòng)而滾動(dòng)
第二種: 這種情況下的背景圖會(huì)完全的等比縮放, 隨著窗口大小改變
首先給html 設(shè)置 height:100%;
給body設(shè)置
background: url(imgs/1.jpg) no-repeat;
background-size: 100% 100%; 若background-size 值為cover, 此情況下是只要有一邊碰到窗口邊,就停止, 這種情況下 ,背景圖不會(huì)等比縮放
同樣道理,
body中的元素若想寬高100%,
第一種方式:
先給html設(shè)置height:100%; 再給該元素設(shè)置width:100%;height:100%;
第二種方式: 給width/height 設(shè)置100% 的同時(shí),也要設(shè)置position:fixed;
頁(yè)面若要用到input, 要去掉其默認(rèn)的 outline 和border, 若使用默認(rèn)的border,后面js修改時(shí), 第一次交互,會(huì)出現(xiàn)微小的像素偏移,建議重置
<linkrel="shortcut icon" href="imgs/favicon.ico"/> 這一句放在<head>中,修改該html網(wǎng)頁(yè)title中小圖標(biāo)
對(duì)文字對(duì)象寬度設(shè)置只能排下一個(gè)文字的寬度距離，讓文字一行排不下兩個(gè)文字使其文字自動(dòng)換行，就形成了豎立排版需求
此時(shí)需要在該css中加上
word-wrap:break-word; word-break:normal;這個(gè)兩句 可實(shí)現(xiàn)標(biāo)點(diǎn)換行的,同時(shí)整體縱向顯示
writing-mode：設(shè)置對(duì)象書寫方向，有兩個(gè)值，
1.lr-tb：從左向右，從上往下 ，
2. tb-rl：從上往下，從右向左
運(yùn)行代碼發(fā)現(xiàn)，IE顯示正常，火狐、谷歌瀏覽器卻不支持，所以不建議使用writing-mode屬性。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
