欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

操作CSS定位配景图片的常用要领总结

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

媒介

各人在网上最常见的一种方案就是在父元素中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()来计较必要定位的值。

示例图片如下:

操纵CSS定位布景图片的常用方式总结

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。看一个火狐下的截图。

操纵CSS定位布景图片的常用方式总结操纵CSS定位布景图片的常用方式总结

上面图片中,黄色地区的是margin,紫色地区的是padding,浅蓝色地区的是content-area。假如给元素配置了padding-box,那么此时图片会定位在右下角,与右下角没有任何空间。以是此时要行使content-box举办定位。最终的结果如下。

操纵CSS定位布景图片的常用方式总结

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>

示例图片如下:

 

操纵CSS定位布景图片的常用方式总结

好了,以上就是这篇文章的所有内容了,但愿本文的内容对各人的进修可能事变能有所辅佐,假若有疑问各人可以留言交换。

本文地址:http://itbyc.com/web/css3/13181.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1