巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

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

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:35 阅读数: 158

媒介

大师在网上最罕见的一种计划便是在父元素中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>

示例图片以下:

 

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

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干动静more

20
04月
HTML5完成签到 功效

Introduce(先容)用户签到的H5例子(css+jquery,无图片),因为网上找的的用户签到例子都不好,要不便是良多多少图片构成的,要不... >>概况

05
08月
百度回应作家诉李彦宏事务

克日作家陈平(微博昵称:陈文伍)在微博上表现,因百度未在法按期限内实行法院作出的公然报歉、补偿经济丧失等讯断,本身已于4月22日向上海... >>概况

04
05月
网站设想和网站开辟人常犯的SEO毛病

设想师和开辟者最轻易犯的9个SEO毛病. 上一篇先容了网站开辟和网页设想职员为甚么学SEO?上面谈谈网页设想和网站开辟... >>概况

02
05月
外链有甚么感化?网站外链的情势及失效准绳汇总

因为此刻几近一切优良的网站都不许可其余网站在本身的网站宣布外链,是以致使好的外链资本愈来愈难取得。良多搜索引擎优化就跑去一些渣滓服装网www.vhao.net网www.vhao.net服装网www.vhao.net网www.vhao.net服装网www.vhao.net网www.vhao.net服装网www.vhao.net网www.vhao.net服装论坛t.vhao.nett.vhao.nett.vhao.nett.vhao.nett.vhao.net或网站宣布外... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站