操纵CSS定位背景图片的经常操纵体例总结

媒介

大师在网上最罕见的一种计划便是在父元素中relative，而后子元素absolute。这类计划固然好，不过带来的一个毛病谬误便是会转变元素的层级干系，若是在多个处所操纵，如许的层叠嵌套的干系会非常紊乱。本文先临时丢弃那种计划，给大师分享几种CSS背景图片定位的计划。

1.无依靠的absolute定位

在收集上，对absolute存在如许一个曲解，以为绝对定位absolute的操纵必必要设置父元素绝对定位relative。如许的懂得不能以为是错的，只能说对界说不完整熟悉。在W3C文档中是如许界说absolute的：

天生绝对定位的元素，绝对static定位之外的第一个父元素停止定位。元素的地位经由过程"left" , "right" , "bottom" , "top" 属性停止划定。

对这句话的懂得应当以下（L : left，R：right，B：bottom，T：top）

a：当给一个元素设置position:absolute以后，若是父元素不设置position:relative，则该元素是经由过程LRBT按照可视窗口地区的左上角停止定位；若是父元素设置了position:relative，则该元素是经由过程LRBT按照父元素容器的左上角停止定位。

b：在天生绝对定位的元素时，不论父元素是不是设置了position:relative，操纵margin-top , margin-left , margin-right , margin-bottom此中的两个非相反标的目的停止定位，其结果会像绝对定位relative一样，按照本身地位停止定位。可是操纵margin定位与relative独一的区分便是，absolute离开文档流，本来的物理空间已消逝，而relative不离开文档流，本来的物理空间仍然占有。

以是，能够操纵无依靠relative的absolute停止定位，定位体例是操纵margin，而不能操纵LRBT。

代码以下：

复制代码代码以下:
<div class="keith">
<div class="main"></p><p> </div>
</div>

复制代码代码以下:
.keith {
margin: 2em;
width: 5em;
height: 5em;
background: lightgreen;
}</p><p>.keith .main {
position: absolute;
background: url("../images/my-icons/Loginicon.png") scroll no-repeat 0 0;
width: 21px;
height: 21px;
margin-left: calc(5em - 25px);
margin-top: calc(5em - 25px);
}

上面代码中，操纵margin-left , margin-top 与 position:absolute来对图片停止定位。操纵了CSS3中的calc()来计较须要定位的值。

示例图片以下：

2.background-position扩大语法

 在CSS3背景与边框中，background-position属性已取得扩大，它许可咱们指定背景图片间隔肆意角的偏移量，只需咱们在偏移量后面指定关头字便可。

代码以下：复制代码代码以下:
<div class="keith"></div>

复制代码代码以下:
.keith{
margin:2em;
width:5em;
height:5em;
background:lightgreen url("../images/my-icons/Loginicon.png") scroll no-repeat ;
background-position:right 5px bottom 5px;
};

上面代码中，操纵background-position扩大语法便可完成间隔右下角5px间隔的定位。

3.background-origin定位

 background-origin是CSS3中新增的属性，首要用来决议background-position属性的参考原点，即决议背景图片定位的出发点。在默许环境下，背景图片的background-position属性老是以元素左上角为坐标原定对背景图片停止背景定位。

background-origin有三个属性值content-box , padding-box(默许值) , border-box 。

看看若何操纵这个属性来对背景图片停止右下角5px的定位，代码以下。

复制代码代码以下:
<div class="keith"></div>

复制代码代码以下:
.keith {
margin: 2em;
width: 5em;
height: 5em;
padding: .5em;
background: lightgreen url("../images/my-icons/Loginicon.png") scroll no-repeat;
background-position: right bottom;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

上面代码中，给盒子设置了padding值。操纵box-sizing属性来调剂div在阅读器下的盒模子为IE盒模子，border-box的意义是总宽度=content area + padding + border 。这里给background-origin属性设置了content-box，能够大师会不太懂得，为甚么不是padding-box。看一个火狐下的截图。

上面图片中，黄色地区的是margin，紫色地区的是padding，浅蓝色地区的是content-area。若是给元素设置了padding-box，那末此时图片会定位在右下角，与右下角不任何空间。以是此时要操纵content-box停止定位。终究的结果以下。

4.calc()定位

若是咱们但愿经由过程内容来撑开容器的宽度和高度时，而不去牢固高度和宽度时，这时辰须要操纵calc属性+background-position属性连系操纵，来对图片停止定位。因为这时辰候并不晓得容器的高度和宽度，只能有100%来停止计较。

复制代码代码以下:
<div class="keith">
这是一段笔墨，用于撑开容器。
</div>

复制代码代码以下:
.keith{
margin:2em;
padding:2em;
display:inline-block;
background:lightgreen url("../images/my-icons/Loginicon.png") scroll no-repeat;
background-position:calc(100% - 5px) calc(100% - 5px);
}</p><p>

示例图片以下：

好了，以上便是这篇文章的全数内容了，但愿本文的内容对大师的进修或任务能有所赞助，若是有疑难大师能够留言交换。