h5-背景样式

     <style>
         div{
             width: 100%;
             height: 150px;
             border: 1px solid red;
             /*overflow: scroll;*/
             /*1.添加背景颜色*/
             /*background-color: blue;*/
             /*2.添加背景图片
             如果图片大于容器，那么默认就从容器左上角开始放置
             如果图片小于容器，那么图片默认会平铺*/
             /*background-image: url("../img/d1.jpg");*/
             background-image: url("../img/h_bg.jpg");
             /*3.设置背景平铺
             round：会将图片进行缩放之后再平铺
             space:图片不会缩放平铺，只会在图片之间产生间距值
             */
             /*background-repeat: round;*/
             /*4.设置在滚动容器的背景行为：跟随滚动/固定*/
             /*fixed：背景图片的位置固定不变
             scroll:当前滚动容器的时候，背景图片也会跟随滚动
             */
             /*local和scroll的区别：前提是滚动当前容器的内容
             loccal：背景图片会跟随内容一起滚动
             scroll：背景图片不会跟随内容一起滚动
             */
             /*background-attachment: local;*/

             /*background-size:设置背景图片的大小  宽度/高度  宽度/auto（保持比例自动缩放）
             建议：在使用这个属性之前确定宽高比与容器的宽高比是一致，否则会造成图片失贞变形
             */
             /*background-size: 50px 50px;*/
             /*设置百分比，是参照父容器可放置内容区域的百分比*/
             /*background-size: 50% 50%;*/
             /*设置contain：按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，是图片包含在容器内
             1.图片大于容器：可能会造成空白区域，将图片缩小
             2.图片小于区域：可能造成空白区域，将图片放大
             */
             /*background-size: contain;*/
             /*cover:与contain刚好相反，背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以所有背景图片，图片会溢出
             1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
             2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容溢出
             */
             background-size: cover;
             /*图片始终保持在页面的中间*/
             background-position: center;
         }
     </style>