Gemeinsame CSS-Methoden zur Positionierung von Hintergrundbildern

CSS背景图片定位其实对于每一位学习前端的同学来说，都已经非常熟悉了。网上铺天盖地的最常见的一种方案就是在父元素中relative，然后子元素absolute。这种方案当然好，不过带来的一个缺点就是会改变元素的层级关系，如果在多个地方使用，这样的层叠嵌套的关系会十分混乱。

先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。

整篇文章会按照如下思路：

1.无依赖的absolute定位

2.background-position扩展语法

3.background-origin定位

4.calc()定位

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。

代码如下：

HTML

.keith {
 margin: 2em;
 width: 5em;
 height: 5em;
 background: lightgreen;
}.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属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字即可。

代码如下：

a82e478133e383de8a38dd7741082ded16b28748ea4df4d9c2150843fecfba68

.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的定位，代码如下。

a82e478133e383de8a38dd7741082ded16b28748ea4df4d9c2150843fecfba68

.keith {
Rand: 2em;
Breite: 5em;
Höhe: 5em;
Polsterung: .5em;
Hintergrund: hellgrüne URL("../images/my-icons/Loginicon.png") scrollen ohne Wiederholung;
Hintergrundposition: rechts unten;
-moz-background-origin: Inhalt;
-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;
}

Legen Sie im obigen Code fest box Der Füllwert. Verwenden Sie das Box-Sizing-Attribut, um das Box-Modell des Div unter dem Browser an das IE-Box-Modell anzupassen. Border-Box bedeutet Gesamtbreite = Füllrand des Inhaltsbereichs. Die Content-Box ist hier für das Attribut „background-origin“ festgelegt. Möglicherweise verstehen Sie nicht, warum es sich nicht um „padding-box“ handelt. Schauen Sie sich einen Screenshot unter Firefox an.

Im obigen Bild ist der gelbe Bereich der Rand, der violette Bereich der Abstand und der hellblaue Bereich der Inhaltsbereich. Wenn padding-box für das Element festgelegt ist, wird das Bild in der unteren rechten Ecke ohne Abstand von der unteren rechten Ecke positioniert. Daher sollte zu diesem Zeitpunkt die Content-Box zur Positionierung verwendet werden. Der Endeffekt ist wie folgt.

4.calc() Positionierung

Wenn wir die Breite und Höhe des Containers durch den Inhalt erweitern möchten, ohne die Höhe und Breite festzulegen, müssen Sie dies tun Verwenden Sie das Calc-Attribut in Kombination mit dem Background-Position-Attribut, um das Bild zu positionieren. Da Höhe und Breite des Containers derzeit nicht bekannt sind, können für die Berechnung nur 100 % herangezogen werden.

73c3b0258cb726ce15189db05c1ff246
Dies ist ein Textstück, das zum Öffnen des Containers verwendet wird. 0c6dc11e160d3b678d68754cc175188a16b28748ea4df4d9c2150843fecfba68

.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);
}

Die Beispielbilder lauten wie folgt:

Ende. Vielen Dank fürs Lesen.