CSS 공통 배경 이미지 위치 지정 방법

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 {
여백: 2em;
너비: 5em;
높이: 5em;
패딩: .5em;
배경: lightgreen url("../images/my-icons/Loginicon.png") 스크롤 반복 없음;
배경 위치: 오른쪽 하단;
-moz-배경-원산지: 콘텐츠;
-o-배경-원산지: 콘텐츠 상자;
-webkit-배경-원산지: 콘텐츠;
배경-원산지: 콘텐츠 상자;
-moz-box-sizing: 테두리 상자;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

위 코드에서 상자 패딩 값입니다. box-sizing 속성을 사용하여 브라우저 아래 div의 상자 모델을 IE 상자 모델로 조정합니다. 테두리 상자는 전체 너비 = 콘텐츠 영역 + 패딩 + 테두리를 의미합니다. 여기서는 background-origin 속성에 대해 콘텐츠 상자가 설정되어 있는데 왜 패딩 상자가 아닌지 이해하지 못할 수도 있습니다. Firefox의 스크린샷을 보세요.

위 사진에서 노란색 부분이 마진, 보라색 부분이 패딩, 하늘색 부분이 콘텐츠 영역입니다. 요소에 padding-box가 설정된 경우 이미지는 오른쪽 하단에서 공백 없이 오른쪽 하단에 배치됩니다. 따라서 이때 위치 지정을 위해서는 Content-Box를 사용해야 합니다. 최종 효과는 다음과 같습니다.

4.calc() 위치 지정

높이와 너비를 고정하지 않고 콘텐츠를 통해 컨테이너의 너비와 높이를 확장하려면 다음을 수행해야 합니다. 이미지 위치를 지정하려면 calc 속성 + background-position 속성을 함께 사용하세요. 현재 컨테이너의 높이와 너비를 알 수 없기 때문에 100%만 계산에 사용할 수 있습니다.

73c3b0258cb726ce15189db05c1ff246
컨테이너를 여는 데 사용되는 텍스트입니다. 0c6dc11e160d3b678d68754cc175188a16b28748ea4df4d9c2150843fecfba68

.keith{
margin:2em;
padding:2em;
디스플레이:inline-block;
배경:lightgreen url('../images/my-icons/Loginicon.png') 스크롤 반복 없음;
배경 위치:calc(100% - 5px) calc(100% - 5px);
}

샘플 사진은 다음과 같습니다.

끝. 읽어주셔서 감사합니다.