HTML&CSS——对背景图定位中background-position属性的自我理解
来源:互联网 发布:小米平板2win10版优化 编辑:程序博客网 时间:2024/05/17 03:59
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习。
现有所有按钮图片的合体
第一步:我们要显示 这个按钮,那么我们要先定义一个div(后面我们称为视窗)标签,宽度和高度刚好能把这个按钮装下就行。
第二步:这里便是我今天说的重点。很多人说background-position是操作的背景图,我却说是操作的这个视窗,透过视窗我们能看到背景图上的一部分而已。
横纵坐标的理解是,只要这个视窗在图片的区域内移动我们都说是负方向的(负坐标)。
显示这个图片按钮,我们不需要指定坐标,默认的就是他。当然也可以 #div5{background-position: 0px 0px;}
显示这个图片按钮,就必须的设置background-position的坐标了,#div6{ background-position:-42px 0px;}
显示这个图片按钮,#div8{ background-position:-42px -41px;}
阅读全文
0 0
- HTML&CSS——对背景图定位中background-position属性的自我理解
- HTML&CSS——对背景图定位中background-position属性的自我理解
- HTML&CSS——CSS中背景background-position负值定位深入理解[图文]
- css用一张背景图background-position定位
- HTML&CSS——利用CSS定位背景图片 background-position
- 对背景图定位中background
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- HTML&CSS——css设置背景图定位的问题
- HTML中background-repeat 重复背景图属性的的作用
- css背景属性background-position如何理解?
- CSS属性之background-position理解
- CSS background-position 背景定位的用法
- 【ibokan】background-position定位一张背景图
- CSS中背景图片的属性:background-repeat、background-position、background-size
- Startting a blogger from now!
- Linux 下修改Tomcat使用的JVM内存大小
- 二、注解实现
- eclipse 配置tomcat
- PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)
- HTML&CSS——对背景图定位中background-position属性的自我理解
- 03 QT创建和加载动态库-①隐式加载
- IRP超时
- 杂记(关于域名、网名以及一些常用图像格式、像素)
- 数字信号处理
- spring 4.x + mybatis 3.x 整合
- Crazy Learning for Day 4
- 外部世界如何访问容器?
- Linux -- 以root权限安装QT5.8.0