h5-背景样式

2019/08/19 18:50
阅读数 39
 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>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部