html切图

一、 网页中添加图片的方式有两种

一种是:通过<img>标签直接插入到html中
另一种是:通过css背景属性添加

二、 怎样来判断添加图片方式??

http://www.poluoluo.com/jzxy/201203/162159.html

Ø 网页中的装饰性的图片,通过背景图片添加

Ø 用户图片,通过插入形式添加

Ø 按钮,有多个状态的效果图片,通过背景图片添加

三、 背景图片定位决定因素:

a. 设置背景图片容器的大小(宽度和高度)

b. 首先要定义背景图片(background-image)

c. 其次是背景图片是否重复(background-repeat)

四、 背景图片定位(background-position)原理

A. 语法:Background-position:水平位置 垂直位置

B. 水平位置/垂直位置设置方法:

1) 数值(px)正负值都可以

2) 百分比(%)范围:0%—100%

3) 关键词:水平位置:left(左) center(中) right(右)

垂直位置:top(上) center(中) bottom(下)

注意:当只设置一个值时:代表水平位置,垂直位置默认居中

C. 原理分析:

 

 

1.jpg

昨天 13:20 上传 下载附件 (24.63 KB) 
2.jpg 昨天 13:20 上传 下载附件(41.38 KB) 
3.jpg 昨天 13:20 上传 下载附件 (77.43 KB) 

 

 

注意点:图片定位值为正值时,图片/容器向右向下移动

图片定位值为负值时,图片/容器向左向上移动

D. 定位处理方法:

1. 一张背景图片定位(针对容器大于图片)

关键词定位:水平位置(left:缩写L;center:缩写C;right:缩写R;)
垂直位置(top:缩写T;center:缩写C;bottom:缩写B;)

4.jpg 昨天 13:20 上传 下载附件 (33.39 KB) 

2. csssprites图片定位

5.jpg


根据上面的方法就可以搞定的,现在公司对于button等之类的背景图片的切图都是切在同一张图上面的,

但是我们button只需要其中的一部分,这时候就要用上面的方法了

[html] view plain copy
  1. <button id="btn_submit" style="margin-left: 100px; margin-top: 25px;background-image: url(resources/css/images/buttons.png); width: 85px; height: 30px; background-position: 90%;"  
  2.                 onclick="javascript:published('publish');">  
  3.                 <span style="color: white;"> 发 布 </span>  
  4.             </button>  
展开阅读全文

没有更多推荐了,返回首页