201703-28工作笔记：复杂的背景问题

在项目中间出现一个的复杂的背景问题：

<div class="choujiang">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　------使用background:url(../img/bgyuan.png) no-repeat;

　　<img src="img/zhuanpan1.png" class="img"/>　　　　　　　　　　　　　　　　　　　　　　　　　

------使用position:absolute;脱离文档流（去掉这个的话，可以试一试效果，然后发现很不好）

　　　　<div class="banner">          　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

-------使用86%;margin-left: auto;margin-right:auto;padding-bottom: -4%;padding-top:80px;来控制转盘的位置，

　　　　因为我们需要把转盘放在合适的位置里面

　　　　<div class="turnplate">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

--------使用position:relative;放转盘的容器

　　　　　　<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>      

--------html5进行画转盘

　　　　　　<img class="pointer" src="img/turnplate-pointer.png"/>　　　　　　　　　　　　　　　　

-------使用position:absolute;来绝对定位，以及width，height，left，top，来进行调控

　　　　</div>
　　　　</div>
</div>

（1）我们首先让背景作为一个background-image

（2）直接给一个《img》，然后利用position;absolute,脱离文档流

（3）定一个div，方便控制转盘的位置

（4）转盘的div，设置position：relative，方便后面的转盘指针（并设置position：absolute），直到最后才用

知识点：(1)使用position：absolute可以脱离文档流

　　　　（2）如果要控制一个div的位置，可以事先预处理一个div，然后控制位置（div里包围一个div）

　　　　（3）处理一个背景图片过高，（给一个div，控制margin-top为负值，进行控制）