给元素添加背景图片的方式有很多，个人总结的有：
用img插入图片；
css3的方式手动绘图；
单独用background-image单独插入图片；
其中用background-image有两种方法，一种是采用的单一照片来设置，另一种就是采用一张整图来切：
会用到的属性有：
background-positon:x轴起点 y轴起点；
background-size:背景图片的大小；
width：终点x轴位置；
height：终点y轴位置；
例如：
.img-total {
cursor: pointer;//定义鼠标移入样式
width: 30px;//x轴终点
height: 30px;//y轴终点
background-image: url(images/position.png);//图片位置
background-size: 120px 30px;//背景图片大小
display: inline-block;
}
.img-home {
background-position: 0 0;//起点位置
background-color: #23ccfe;
}
.img-favorite {
background-position: -31px 0;
background-color: #095f8a;
}
.img-cart {
background-position: -61px 0;
background-color: #1b961b;
}
.img-user {
background-position: -91px 0;
background-color: #94df94;
}
其中背景图片是用一张大图来切的：
显示效果：
可以通过：background-position还有width,height属性来控制起始位置来控制切点，要注意的是因为(0，0)点默认是左上角，而图片在原点的右下角(第四象限)所以position的坐标为负值；
css的背景图片background
1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 ...
(转)HTML&;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
HTML&;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
CSS中背景图片定位方法
转自:/blog//05/css_background_image_positioning.html 作者:阮一峰 日期:5月 ...
img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 /3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
CSS中背景图片的background-position中的left top到底是相对于谁的？
在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...
CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码:
