CSS中背景background-position负值定位深入理解
来源:互联网 发布:电信4g网络 怎样设置 编辑:程序博客网 时间:2024/05/02 02:01
CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来.
下面是我要用到的一个背景图:
运行下面代码:
Source Code to Run [www.52css.com]
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片,
在浏览器中看到的效果:
从上图可以看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当我们定位于background-position:-50px -50px;时发现图片向左上,移动了,也就以DIV的左上角为中心,图向左移动了50PX,向右也移动了50PX.第三个示例就是上值的情况图移动的效果.这个应该是好理解的.
总结一下就是以上都是以DIV的0,0点为参考点图片移动,如果把DIV区解释为一个坐标轴,图向左,上都为负,向右,下为正值.
好象说这么多你也记不住,那我就告诉你,你应该记住什么吧!
在实践中多数情况是知道一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图(这张图相当于你用的效果图或称设计图),记住这张图相信你一定能掌握背景图负值的方法了
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解-CSS教程
- HTML&CSS——CSS中背景background-position负值定位深入理解[图文]
- css background-position负值定位解析
- CSS background-position 背景定位的用法
- css背景属性background-position如何理解?
- CSS:background-position可以指定为负值
- CSS背景图片定位(background-position,css sprit,背景定位,background-imag
- HTML&CSS——对背景图定位中background-position属性的自我理解
- HTML&CSS——对背景图定位中background-position属性的自我理解
- 深入理解CSS中的定位(position)
- background-position负值
- CSS定位背景图片 background-position
- 搞清CSS样式中background-position(背景图片定位)
- 3.7.3 给定3个数字,求出这3个数字中的最大值,并将最大值输出。
- 3ds Max里的sub-object的selection , scale ,rotate,move
- Java内存管理概述
- gcc的安装与配置
- test1
- CSS中背景background-position负值定位深入理解
- php 实现 js escape unescape
- 《Java面向对象编程》学习笔记17--对象的序列化和反序列化
- X-Ways Forensics 快速入门
- 浅谈GCC预编译头技术
- 一个涉及比较多的正则表达式, 希望可以帮助大家对正则有更多了解.
- eclipse 代码折叠插件Code Folding
- Smashing Adobe's Heap Memory Management Systems for Profit.
- 中断