整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
