## 背景
# 百度首页案例
# 背景图片 background-image
# 背景平铺属性 background-repeat
# 背景图片定位属性 background-position
# 背景图片关联方式 background-attachment
#精灵图
# 多重背景
# 背景尺寸属性 background-size
# 背景定位区域属性 background-orange
# 背景绘制区域属性 background-clip
如何设置标签的背景颜色?
在CSS中有一个background-color:属性,就是专门给标签设置背景颜色的
如何设置背景图片?
在CSS中有一个background-image:url();
的属性,就是专门用于设置背景图片的
注意点:
1.图片的地址必须放在url()的括号中,图片的地址可以是本地的地址,也可以是网络图片
2.如果图片的大小没有标签的大小大,那么会自动在水平方向平铺铺满和填充
3.如果网页上出现了图片,那么浏览器会再次发送请求获取图片
如何控制背景图片的平铺方式?
在CSS中有一个background-repeat属性,就是专门用于控制背景图片平铺方式的
background-repeat: 取值;
取值:
repeat(默认)
no-repeat
repeat-x
repeat-y
应用场景:
可以通过背景图片的平铺来降低图片的大小,提升网页加载的速度
如何控制背景图片的位置?
在CSS中有一个background-position:属性,就是专门用于控制背景图片的位置
格式:
background-position:水平方向 垂直方向;
取值:
-具体的方位名词
水平方向:
top
left
right
垂直方向:
top
center
bottom
-像素:
例如:background-position:5px 20px;
注意点:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色
像素一定要带单位
像素可以接受负数
1.背景属性缩写的格式
background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
background-color
background-image
background-align
background-attachment
background-position
background:red url() norepeat left bottom;
快捷键:
bg+ + tab
注意点:
background属性中,任何属性都可以被省略
什么是背景关联方式?
默认情况下背景图片会随着滚动条的滚动而滚动,那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景关联方式?
-在CSS中有一个background-attachment的属性,就是专门用于修改背景图片关联方式的
-格式:
background-attachment: 取值;
取值:
scroll 会随着滚动条滚动而滚动
fixed 不会随着滚动条滚动而滚动
背景图片和插入图片有什么区别?
1.1
背景图片仅仅是一个装饰,不会占用位置
插入图片会占用位置
1.2
背景图片有定位属性,可以很方便的控制图片的位置
插入图片没有定位属性,所以控制图片的位置不太方便
1.3
插入图片的语义比背景图片的语义要抢,所以在企业开发中如果你的图片想被搜索引擎收录,那么推荐使用插入图片
可以用div嵌套实现多个背景图片嵌套
1.什么是CSS精灵图?
CSS精灵图是一种图像合成技术
2.CSS精灵图作用
可以减少请求的次数,以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
(fireworks软件进去记得先用锁锁住打开图片的那个图层否则以后容易造成图标错位)
怎么设置多重背景?
-连写用逗号隔开
-分开写用逗号隔开
注意点:
先添加的图片会显示在上面
什么是背景尺寸属性? background-size
背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小
1.默认
2.具体像素
3.百分比
4.宽度等比拉伸auto,50px
5.高度等比拉伸50px,auto
6.cover宽高等比拉伸,并且占满元素CSS3
7.contain宽高等比拉伸,宽度或高度填满元素即停止拉伸
什么是背景定位区域属性? background-orange
-告诉系统图片/颜色从什么区域开始显示
取值:
padding-box默认
border-box
contain-box
规定背景的绘制区域background-clip
-背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的,默认情况下是从border开始绘制的
取值:
border-box默认
padding-box
【##|## 背景】content-box
