h5-背景样式 

 1     <style>
 2         div{
 3             width: 100%;
 4             height: 150px;
 5             border: 1px solid red;
 6             /*overflow: scroll;*/
 7             /*1.添加背景颜色*/
 8             /*background-color: blue;*/
 9             /*2.添加背景图片
10             如果图片大于容器，那么默认就从容器左上角开始放置
11             如果图片小于容器，那么图片默认会平铺*/
12             /*background-image: url("../img/d1.jpg");*/
13             background-image: url("../img/h_bg.jpg");
14             /*3.设置背景平铺
15             round：会将图片进行缩放之后再平铺
16             space:图片不会缩放平铺，只会在图片之间产生间距值
17             */
18             /*background-repeat: round;*/
19             /*4.设置在滚动容器的背景行为：跟随滚动/固定*/
20             /*fixed：背景图片的位置固定不变
21             scroll:当前滚动容器的时候，背景图片也会跟随滚动
22             */
23             /*local和scroll的区别：前提是滚动当前容器的内容
24             loccal：背景图片会跟随内容一起滚动
25             scroll：背景图片不会跟随内容一起滚动
26             */
27             /*background-attachment: local;*/
28 
29 
30             /*background-size:设置背景图片的大小  宽度/高度  宽度/auto（保持比例自动缩放）
31             建议：在使用这个属性之前确定宽高比与容器的宽高比是一致，否则会造成图片失贞变形
32             */
33             /*background-size: 50px 50px;*/
34             /*设置百分比，是参照父容器可放置内容区域的百分比*/
35             /*background-size: 50% 50%;*/
36             /*设置contain：按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，是图片包含在容器内
37             1.图片大于容器：可能会造成空白区域，将图片缩小
38             2.图片小于区域：可能造成空白区域，将图片放大
39             */
40             /*background-size: contain;*/
41             /*cover:与contain刚好相反，背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以所有背景图片，图片会溢出
42             1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
43             2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容溢出
44             */
45             background-size: cover;
46             /*图片始终保持在页面的中间*/
47             background-position: center;
48         }
49     </style>

 

posted @ 2019-08-19 18:50  FengBrother  阅读(1267)  评论(0)    收藏  举报