ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の一般的な背景画像の配置方法

CSS の一般的な背景画像の配置方法

高洛峰
高洛峰オリジナル
2016-10-08 13:32:571230ブラウズ

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;
背景:ライトグリーン url("../images/my-icons/Loginicon.png" ) スクロール no-repeat;
背景位置: 右下;
-moz-background-origin: コンテンツ;
-o-background-origin: コンテンツボックス;
-webkit-background-origin: コンテンツ;
背景-原点: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

上記のコードでは、 give ボックスにはパディング値が設定されています。 box-sizing 属性を使用して、ブラウザーの下の div のボックス モデルを IE ボックス モデルに調整します。Border-box は、合計幅 = コンテンツ領域 + パディング + ボーダーを意味します。ここでは、background-origin 属性に content-box が設定されています。なぜこれが padding-box ではないのか理解できないかもしれません。 Firefox でのスクリーンショットを見てください。

上の図では、黄色の領域がマージン、紫色の領域がパディング、水色の領域がコンテンツ領域です。要素にpadding-boxが設定されている場合、画像は右下隅からスペースを空けずに右下隅に配置されます。したがって、このときの配置には content-box を使用する必要があります。最終的な効果は以下の通りです。

4.calc() 位置決め

高さと幅を固定せずに、コンテナの幅と高さをコンテンツ全体に拡張したい場合は、 calc 属性と background-position 属性を組み合わせて使用​​する必要があります。画像の位置を決めます。現時点ではコンテナの高さと幅が不明なため、計算に使用できるのは 100% のみです。

73c3b0258cb726ce15189db05c1ff246
これはコンテナを開くために使用されるテキストです。 0c6dc11e160d3b678d68754cc175188a16b28748ea4df4d9c2150843fecfba68

.keith{
マージン:2em;
パディング:2em;
ディスプレイ:インラインブロック;
背景:ライトグリーン url('../images/my-icons/ Loginicon.png')scroll no-repeat;
background-position:calc(100% - 5px) calc(100% - 5px);
}

サンプル画像は次のとおりです:

終わり。読んでくださった皆様、ありがとうございました。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。