1、背景相关属性用法
1).background-image 设置背景图片
-语法:background-image:url(相对路径);
2).background-repeat 设置背景图片的重复方式
可选值:
repeat,默认值,双方向重复平铺;
no-repeat,不重复,有多大显示多大;
repeat-x,背景图片沿水平方向重复;
repeat-y,背景图片沿垂直方向重复;
3).background-position 调整背景图片在元素中的位置,默认是贴着左上角显示
用top right left bottom center设置偏移量~px
4).background-clip 设置背景色的范围
可选值:
border-box 默认值,背景颜色出现在边框下边
padding-box 背景不会出现在边框,只会出现在内容区和内边框
content-box 背景只出现在内容区
5).background-orgin 设置背景图片的范围
设置背景图片额偏移量计算的原点,配合偏移量使用
可选值:
border-box 从边框开始计算偏移量
padding-box 从内边距开始计算偏移量
content-box 从内容区开始计算偏移量
6).background-size 设置图片的大小
参数:第一个值(宽度) 第二个值(高度)
如果只写一个,第二个值默认为auto
按图片比列给宽高效果图如下
cover 图片的比例不变,将元素铺满,效果如下
contain 图片比例不变,将图片完整显示
2、雪碧图
图片整合技术:将多个图片整合为一张图片,提高了请求速度,访问效率和用户体验
使用步骤:
先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景
设置一个偏移量,以显示正确的图片
<style> .box1{ width:175px; height:45px; border:1px solid red; background-image:url(绝对路径); background-position:10px 100px; } </style> <div class="box1"></div>