当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS中背景background-position负值定位深入理解

时间:2013-03-02 03:43来源:未知 作者:admin 点击:

标签:CSS中背景background-position负值定位深入理解 CSS(655)背景(35)负值(1)
--> [网站建设之]CSS中背景background-position负值定位深刻懂得 Tag:深入 理解 定位 背景 深入 理解 定位 背景 好象说这么多你也记不住,那我就告知你,你应该记住什么吧, CSS中的强制换行与强制不换行 ! 在实际中多数情形是晓得一个图的位置要如上图中那
CSS中背景background-position负值定位深入理解》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332F2013.htm
--> [网站建设之]CSS中背景background-position负值定位深刻懂得

Tag:深入   理解   定位   背景     深入   理解  ,CSS中的继承与优先级总结; 定位   背景    

  好象说这么多你也记不住,那我就告知你,你应该记住什么吧,CSS中的强制换行与强制不换行

 

 

  在实际中多数情形是晓得一个图的位置要如上图中那个黄色的点,我们应该在效果图上量出它的长度得出两个值都是150PX,CSS中的图片保存方法,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,CSS中清除浮动方法,在图上的量法就看下图(这张图相称于你用的效果图或称设计图),记住这张图信任你必定能控制背景图负值的方式了,CSS中水平居中和垂直居中的几种方法

下面是我要用到的一个背景图:

  从上图能够看到:当为background-position:0 0;时图片的左上角与DIV的左上角是重合的,当咱们定位于background-position:-50px -50px;时发明图片向左、上移动了,也就以DIV的左上角为核心,图向左移动了50PX,向上也移动了50PX.第三个示例采取的都是正值,CSS中有序列表的一些特殊代码形式,可以解解释为图向右、向下移动的效果.这个应当是好理解的.
  总结一下就是以上都是以DIV的0,0点为参考点图片挪动,假如把DIV区说明为一个坐标轴图,向左,CSS中最小高度(min-height)的妙用,上都为负,向右,下为正值.


代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" lang="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<,CSS中如何调整行距,字距;div class="style2">
x:-50px,<span class="blue">y:-50px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
<,CSS中如何让连接的下划线变成虚线;/html>

 ,CSS中如何实现图片垂直居中;

HTML页中是162*162的灰色背景DIV块并参加三种不同地位的背景图片,
  在阅读器中看到的后果:

 

 


(责任编辑:网站建设)
CSS中背景background-position负值定位深入理解相关文章
上一篇:CSS中的继承与优先级总结 下一篇:CSS中视觉语义不等于基于表现的类
回到顶部