[TOC] # 图片格式 * jpeg: 对色彩保留较好,高清 * gif: 最多只能存储256色, 但是可以保存透明背景和动画效果 * png: 结合了gif和jpeg的优点,能保存透明背景 * psd: ps的专用格式,里面可以存放图层,通道,遮罩 # 背景属性 ~~~ Background-color: 背景颜色 background-image:url(“1.png”); 背景图片 background-repeat: repeat | no-repeat | repeat-x | repeat-y 背景平铺方式 background-position: left | right | top | bottom | center 背景位置 Background-attachment: scroll|fixed 背景滚动 ~~~ * 写方位的时候，没有顺序限制 * 如果只写一个数值，数值为水平方向的值，垂直方向默认居中 * 如果写二个数值，前值为水平方向，后值为垂直方向 背景属性连写 ~~~ background:red url("1.png") no-repeat 30px 40px scroll; ~~~ ★：连写的时候没有顺序要求，url为必写项。 # CSS 背景(background) CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 | background-color | 背景颜色 | | ------------------------------------- | -------- | | background-image | 背景图片地址 | | background-repeat | 是否平铺 | | background-position | 背景位置 | | background-attachment | 背景固定还是滚动 | | 背景的合写（复合属性） | | | background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 | | ## 背景图片(image) 语法： ~~~css background-image : none | url (url) ~~~ 参数： * none : 　无背景图（默认的） * url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。 ## 背景平铺（repeat） 语法： ~~~css background-repeat : repeat | no-repeat | repeat-x | repeat-y ~~~ 参数： * repeat : 　背景图像在纵向和横向上平铺（默认的） * no-repeat : 　背景图像不平铺 * repeat-x : 　背景图像在横向上平铺 * repeat-y : 　背景图像在纵向平铺 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。 ## 背景位置(position) 语法： ~~~css background-position : length || length background-position : position || position ~~~ 参数： * length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 * position : 　`top | center | bottom | left | center | right ` 说明： 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。 注意： 1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。 2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 `background-position: 15px top;` 则 15px 一定是 x坐标 top是 y坐标。 实际工作用的最多的，就是背景图片居中对齐了。 如果图片太大的话,可以用水平居中,垂直靠上 ~~~ background-position : center -10px ~~~ ## 背景附着(attachment) 语法： ~~~css background-attachment : scroll | fixed ~~~ 参数： * scroll : 　背景图像是随对象内容滚动 * fixed : 　背景图像固定 说明： 设置或检索背景图像是随对象内容滚动还是固定的。 ## 背景简写 background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写： `background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置` ~~~css background: transparent url(image.jpg) repeat-y scroll 50% 0 ; ~~~ ## 背景透明(CSS3) CSS3支持背景半透明的写法语法格式是: ~~~css background: rgba(0,0,0,0.3); ~~~ 最后一个参数是alpha 透明度 取值范围 0~1之间 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。 同样， 可以给 文字和边框透明 都是 rgba 的格式来写。 ~~~css color:rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); ~~~ ## 背景缩放(CSS3) 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。 其参数设置如下： a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高） b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域. ~~~css background-image: url('images/gyt.jpg'); background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */ ~~~ ## 多背景(CSS3) 以逗号分隔可以设置多背景，可用于自适应布局 ~~~css background-image: url('images/gyt.jpg'),url('images/robot.png'); ~~~ 如果设置的多重背景图之间存在交集(即存在重叠关系),前面的背景图会覆盖在后面的背景图之上. 为了避免背景色将图像盖住,背景色通常都定义在最后一组上 ~~~css background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px , url(test1.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa; ~~~ # css精灵图 将网页中的一些背景图像整合到一张大图中(精灵图). 然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图, 就需要使用css的`background-image`, `background-repeat`和`background-postition`属性进行背景定位,其中最关键的是使用background-position属性精确的定位 ~~~ .box{ width: 24px; height: 22px; background: url("ta.png") 0 -266px; } <div class="box"></div> ~~~ 就是这背景图有很多小图标,靠移动横坐标和纵坐标,显示一张大图上的小图 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。 大部分情况下，精灵图都是网页美工做。 ~~~ 我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。 我们精灵图的宽度取决于最宽的那个背景。 我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。 ~~~ 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。 # 去除图片底侧空白缝隙 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。 解决的方法就是： 1. 给`img vertical-align:middle | top`等等。 让图片不要和基线对齐。 2. 给img 添加 `display：block;` 转换为块级元素就不会存在问题了 # 滑动门 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门  核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。 一般的经典布局都是这样的： ~~~ <li> <a href="#"> <span>导航栏内容</span> </a> </li> ~~~ ~~~ <style> * { margin: 0px; padding: 0px; } a { margin: 100px; display: inline-block; height: 33px; /* 千万不能给宽度, 宽度是不对, 我们要推拉门, 自由缩放 */ background: url(images/ao.png) no-repeat; padding-left: 15px; color: #fff; text-decoration: none; line-height: 33px; } a span { height: 33px; display: inline-block; background: url(images/ao.png) no-repeat right; /* span不能给宽度,利用padding把盒子撑开, 要右边的圆角, 所以背景位置右对齐 */ padding-right: 15px; } </style> <body> <a href=""> <span>111</span> </a> <a href=""> <span>222</span> </a> <a href=""> <span>333</span> </a> </body> ~~~ 总结： 1. a 设置 背景左侧，padding撑开合适宽度。 2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。 3. 之所以a包含span就是因为 整个导航都是可以点击的。