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