CSS偏移量
时间:2010-07-21
来源:互联网
偏移量在web前端用的很广泛,能够通过一张图片实现整个页面的布局。
主要用到的参数:
width:显示部分的宽度
height:显示部分的高度
background-image: 图片文件
background-position:定位要显示部分(通过左、上2个参数)
实例:
复制代码
主要用到的参数:
width:显示部分的宽度
height:显示部分的高度
background-image: 图片文件
background-position:定位要显示部分(通过左、上2个参数)
实例:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style type="text/css">
- #pianyi {
- background-image:url(login_pic.png);
- background-position:-107px -78px;
- width:65px;
- height:187px;
- }
- #py {
- width:91px;
- height:37px;
- background-image:url(1.jpg);
- background-position:-174px -133px;
- }
-
-
- </style>
- </head>
-
- <body>
- <div id="pianyi">
-
- </div>
-
- <div id="py">
-
- </div>
-
- </body>
- </html>
作者: wtwei 发布时间: 2010-07-21
CSS Sprite还不错的。
不过做起来效率不高,修改的时候也挺麻烦的,考验前端开发人员的耐心细心。
不过做起来效率不高,修改的时候也挺麻烦的,考验前端开发人员的耐心细心。
作者: diggbox 发布时间: 2010-07-21
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28