整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eb前端開發(fā)課程：css背景模塊-圖像定位。
講課人：波波老師。
background-color：背景顏色。background-image：背景圖像。background-repeat：背景圖像平鋪。background-position：背景圖像定位。background-attachment：背景圖像是否固定。
當(dāng)設(shè)置圖片不平鋪時(shí)，就必須要設(shè)置圖片的定位了。background-position就是設(shè)置圖像的定位，來看一下代碼，看下位置。
·首先把圖片的平鋪屬性改成不平鋪。
·再把圖片的background position設(shè)置成center，是居中對(duì)齊。它已經(jīng)居中對(duì)齊了，垂直放也是居中對(duì)齊。
·現(xiàn)在有個(gè)問題，它的窗口距離比較短，把它的高度設(shè)置成100vh，這樣可以跟窗口對(duì)齊。可以看到它是水平和垂直都舉動(dòng)對(duì)齊。
·這樣把它的改一改改成top，這里改成right，就可以看到它在top和right，也就是上方和右方對(duì)齊。
·除了使用方向以外，還可以使用數(shù)值，比如100px，這里設(shè)成500px，可以看到它在水平100PX垂直500PX這里進(jìn)行了對(duì)齊。
·同時(shí)還可以使用百分比，比如這里設(shè)成10%，這里設(shè)為50%，90%，可以看到它也針對(duì)父元素的百分比進(jìn)行了對(duì)齊。
還記得我們開發(fā)全屏頁面或者是移動(dòng)端頁面時(shí)經(jīng)常會(huì)設(shè)置一句話
html, body { height: 100%; }原因是，當(dāng)沒有內(nèi)容撐開高度時(shí)，html和body的默認(rèn)高度是0，如果內(nèi)容想要按照比例或是撐滿全屏?xí)r，就沒辦法正常使用百分比
而如果只設(shè)置body { height: 100%; }，這時(shí)body以html的高度為基準(zhǔn)，但html默認(rèn)高度也是0，所以需要設(shè)置html與body高度同與瀏覽器等高
當(dāng)我們沒有設(shè)置任何高度的情況下，給body設(shè)置背景色，顏色竟然是可以布滿瀏覽器的，然而可以看到控制臺(tái)中，body實(shí)實(shí)在在是沒有高度的，這究竟是為什么呢？
body {
background: pink;
}事實(shí)上，當(dāng)我們單獨(dú)給body設(shè)置背景顏色時(shí)，并不是body標(biāo)簽被賦予了背景色，而是【 瀏覽器畫布 】賦上了顏色，可以理解為，body的背景色被瀏瀏覽器”吃掉“
那如果我們同時(shí)給html與body設(shè)置背景色，會(huì)發(fā)生什么樣的結(jié)果呢
html {
background: orange;
}
body {
background: pink;
}可以看到，我們?cè)O(shè)置的body背景色竟然“失效了”，瀏覽器被賦予了html的背景色
而在我看來，實(shí)際是我們?cè)O(shè)置的body背景色[生效了]，但因body默認(rèn)高度為0，所以在頁面中并沒有粉色區(qū)塊顯示，那我們嘗試在body中添加一些內(nèi)容
可以看出，body的高度被撐開，而body的背景色則是實(shí)實(shí)在在只給了body
瀏覽器會(huì)“吸收”html與body的背景色
當(dāng)只設(shè)置了body背景色時(shí)，瀏覽器發(fā)現(xiàn)了，于是把這個(gè)背景色“占為己有”
而如果html設(shè)置了背景色，瀏覽器則會(huì)認(rèn)為html離我更近，所以會(huì)“拿走”html的背景色當(dāng)成自己的顏色
當(dāng)然，到現(xiàn)在為止，我們實(shí)驗(yàn)的都是純色背景，那如果我們?cè)O(shè)置成漸變色，還是相同的結(jié)果嗎？
疑問產(chǎn)生，開始實(shí)驗(yàn)
首先，只設(shè)置body的背景為線性漸變粉色pink到白色#fff，預(yù)想結(jié)果應(yīng)該是和背景一樣，直接瀏覽器從上往下的漸變
body {
background: linear-gradient(pink, #fff);
}嗯？這怎么和預(yù)想不一樣，再放大頁面看一下漸變，就可以發(fā)現(xiàn)每個(gè)漸變的高度和html的高度是一致的，而html的高度則是body的默認(rèn)margin撐開
于是開始設(shè)置
* {
margin: 0;
padding: 0;
}同樣，如果漸變給html設(shè)置的，也不會(huì)作用到瀏覽器上
說明瀏覽器并不會(huì)把漸變色據(jù)為己有，那如果想要設(shè)置全屏漸變，就需要用到我們文章開頭說到的
html, body { height: 100%; }你曉得了吧！！！
<!DOCTYPE html>
<html>
<head>
<title>html5添加音樂</title>
<meta charset="utf-8">
<!--embed標(biāo)簽寫在<head>里面的title標(biāo)簽下-->
<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 說明：
1、src：文件路徑。
2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。
3、autostart="true" 表示是打開網(wǎng)頁加載完后自動(dòng)播放。
4、loop="true"表示 循環(huán)播放 如僅想播放一次則為：loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白氣球.mp3">
</audio>
<!-- 說明：
1、autoplay="autoplay"，則背景音樂將在音網(wǎng)頁打開后就自動(dòng)馬上播放。
2、controls="controls"，則為了在頁面內(nèi)顯示顯示控件，如播放按鈕。
3、"loop="loop"，則是為了使背景音樂重復(fù)播放。
4、preload="auto"，則音頻在頁面加載的同時(shí)進(jìn)行加載，并預(yù)備播放。
5、src=""，即是在""內(nèi)加入背景音樂的保存路徑，如：src=""。
注：若是想播放按鈕隱藏，則使用以下語句：
直接使用css 的display控制audio標(biāo)簽的顯示： -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
