文档章节

h5-背景样式

o
 osc_g8254g7s
发布于 2019/08/19 18:50
字数 582
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 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>

 

上一篇: h5-立方体
下一篇: h5-边框图片
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
web网页开发第四课学习总结

左侧列表的实现 知识点: HTML中的标签:块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li> CSS样式中的属性: 图片边框:border 高:height 宽:width 内边距:pandding ...

书涵梦欣
2019/03/26
0
0
3.25企业实训

左侧列表的实现 “活力地带”这块的div,包含标题<h5>、图片<img />、列表标签<ul><li></li></ul> h1~h6标题,h1最大 <div id="huoli"> <h5>活力地带</h5> <ul> <li><img src="images/1.gif......

尼古拉斯琨
2019/03/26
0
0
3.18日企业实训第三节(左侧列表的实现)

●#banner:一张头部图片 #left:中间的左边部分 #main:中间主要部分 #footer:尾部的部分 #menu:导航菜单 #right:中间的右边部分 #zuozhe:图片和文本 #huoli:标题、小图标、列表 #list:标题、列...

Absentgirl
2019/03/18
0
0
网页设计第三讲

一、左侧列表的实现 1.知识点: (1)HTML中的标签:块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li> (2)CSS样式中的属性: 示例: 图片边框:border 高:height 宽:w...

123别回头
2019/03/25
7
0
3.25企业实训

3、左侧列表的实现 知识点: HTML中的标签:块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li> CSS样式中的属性: 图片边框:border 高:height 宽:width 内边距:panddin...

雨落心尘
2019/04/02
2
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
38分钟前
20
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
59分钟前
17
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
今天
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
55
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部