html切图
来源:互联网 发布:淘宝的一元秒杀在哪 编辑:程序博客网 时间:2024/06/07 17:11
一、 网页中添加图片的方式有两种
一种是:通过<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. 原理分析:
昨天 13:20 上传 下载附件 (24.63 KB)
昨天 13:20 上传 下载附件(41.38 KB)
昨天 13:20 上传 下载附件 (77.43 KB)
注意点:图片定位值为正值时,图片/容器向右向下移动
图片定位值为负值时,图片/容器向左向上移动
D. 定位处理方法:
1. 一张背景图片定位(针对容器大于图片)
关键词定位:水平位置(left:缩写L;center:缩写C;right:缩写R;)垂直位置(top:缩写T;center:缩写C;bottom:缩写B;)
昨天 13:20 上传 下载附件 (33.39 KB)
2. csssprites图片定位
根据上面的方法就可以搞定的,现在公司对于button等之类的背景图片的切图都是切在同一张图上面的,
但是我们button只需要其中的一部分,这时候就要用上面的方法了
阅读全文
0 0
- html切图
- html
- html
- html
- HTML
- HTML
- html
- html
- html
- html
- HTML
- HTML
- Html
- html
- HTML
- html
- HTML
- HTML
- 爬虫之Scrapy框架知识总结
- hdu2017新生赛
- MySQL mysqldump数据导出详解
- 多元函数的微分中值定理的推广 (无参考资料)
- ajax上传文件之ajaxfileupload使用详解
- html切图
- astyle安装
- 【spring】--IoC 之理解
- Mysql| Mysql函数,聚集函数的介绍与使用(Lower,Date,Mod,AVG,...)
- 深入浅出 RPC详解
- CREATE TABLESPACE
- 6.3 理解接口
- 欢迎使用CSDN-markdown编辑器
- 第六次