来自 前端知识 2019-12-07 15:33 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

关于CSS一些细节问题,你真的了解background

你真正掌握background-position

2017/01/16 · CSS · background

原稿出处: 大漠   

background属性是CSS中最广泛的本性之意气风发,它是一个简写属性,其含有background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你或然会说,这一个属性再轻巧不过了,未有可讲的。那篇小说接下去要介绍的不是负有有关于background个中的质量,而是说说background-position性格。在详细介绍background-position以前,先要问大家,你真正精晓那特性情吗?言外之音,接下去介绍是您所不打听的background-position连带细节。

本文是二零一六年的最终大器晚成篇随笔,主借使将后生可畏部分CSS细节问题整合治理一下。

您所精通的background-position

background-position是用来调控作而成分背景图片的职位。它选取三种值:

  • 关键词,比如toprightbottomleftcenter
  • 长度值,比如pxemrem
  • 百分值%

我们最常用的是值也能够说最精晓的值是关键词长度值,当然百分比也会使用,但是百分比使用最多的是0%50%100%

图片 1

来看三个简易的事例:

将作用图截取做一个回顾的深入分析:

图片 2

图形上的标号消息已经告诉大家很详细的音信了。示例中容器材有下述天性:

  • div容器尺寸410px x 210px,边框宽度10px
  • 容器背景图尺寸100px x 100px
  • 首先张背景图background-position:10px 10px;第二张背景图background-position: center
  • 当中黑白格子尺寸是10px x 10px

很健康的局部性格,也足以说是熟悉可是的风味。那么上边,大家来聊点我们不为所知的background-position

  • background-position取值为百分比的总计办法
  • margin相邻折叠难题
  • position的absolute和relative定位top、left、right、bottom问题
  • 覆盖样式难点

你所不驾驭的background-position

前边也说过了,background-position取值除了长度值(<length>)和重要性词之外,还能取值为百分比率。当然大家也选用过百分比率,比方:

CSS

body { background-position: 100% 0% } /* right top */ body { background-position: 50% 0% } /* top center */ body { background-position: 50% 50% } /* center */ body { background-position: 50% 100% } /* bottom */

1
2
3
4
body { background-position: 100% 0% }  /* right top */
body { background-position: 50% 0% }   /* top center */
body { background-position: 50% 50% }  /* center */
body { background-position: 50% 100% } /* bottom  */

那么难题来了,你真正通晓background-position取值为百分比的预计比例吗?倘诺本人的百分比值不是和主要性词对等的值吗?那么它是怎么总计的?那后生可畏多级的难点,你是还是不是有明细的探讨过。就小编个人来讲,我从前所精通也存在三个误区:

自己直接知道的background-position百分比率,它是相对于背景图片的尺寸。

但骨子里,这种精晓是生机勃勃种错误。那也是几日前踩的坑开掘的。然后立马查了豆蔻梢头晃有关的标准文书档案,才深透的搞驾驭。那接下去,大家就来聊background-position取值为百分比的计量办法。

W3C规范是那般汇报的:

A percentage for the horizontal offset is relative to (width of background positioning area – width of background image). A percentage for the vertical offset is relative to (height of background positioning area – height of background image), where the size of the image is the size given by ‘background-size’.

相当于说,当背景图片尺寸(background-size)不做其余的重新设置(也正是100% 100%)时,水平百分比的值等于容器宽度百分比率减去背景图片宽度百分比率。垂直百分比的值等于容器中度百分比率减去背景图片中度百分比率。

比如前面包车型地铁身体力行,倘诺取值background-position: 75% 50%;,背景图片的初始地点:

  • 水平地方(x轴):(410 - 100) * 75% = 232.5px
  • 垂直地点(y轴):(210 - 100) * 50% = 55px

经过一个Gif图来陈说其对应的作用:

图片 3

示范中五个div,此中第一个divbackground-position选取的是px值,第二个divbackground-position行使的是%

  • 第一个divbackground-position的值从0px 0px232.5px 55px
  • 第二个divbackground-position的值从0% 0%75% 50%

据他们说专门的职业,以致前边的计量,简单窥见第4个divbackground-position职责相近。用张草图来描述,大家更易通晓当中的意义:

图片 4

上边介绍的是background-position取值为百分比率的精兵简政情势。接下来再介绍叁个background-position前景将全数的天性。正是足以显式的经过重大词内定背景图片间隔容器的岗位。举例:

CSS

background-position: left 10px top 15px; /* 10px, 15px */ background-position: left top ; /* 0px, 0px */ background-position: 10px 15px; /* 10px, 15px */ background-position: left 15px; /* 0px, 15px */ background-position: 10px top ; /* 10px, 0px */ background-position: left top 15px; /* 0px, 15px */ background-position: left 10px top ; /* 10px, 0px */

1
2
3
4
5
6
7
background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

只不过浏览器暂且还不帮助此天性,但小编想为来有一天大家在骨子里的连串中能够运用上。

1、background-position取值为百分比的测算格局

总结

日常在众多开荒者眼中,CSS是十分的轻巧。未有其他的手艺价值,但其实其实不然,倘使确实去追查的话,CSS还会有超级多有趣的东东。举个例子那篇小说,作者想有比超多开采者跟小编同风姿洒脱,并不曾把这么回顾的一个CSS属性搞通晓,搞通透到底。最佳期望大家能维系少年老成颗研讨的心,不断的去研究你想追究的别的文化。最后希望那篇小说对您抱有助于,倘诺你有更加好的提议或费尽脑筋,迎接在底下的评说中与我们大器晚成道分享。

1 赞 3 收藏 评论

图片 5

background-position属性相信您用的多多,不过当取值为百分比时,你是还是不是认为它是相对于背景图片的尺寸来测算(作者前面也是这种主张,但看了大漠老师的《您真的领悟background-position》后,才知大错特错)

来寻访上面包车型大巴代码:

.box {   
  width:400px;   
  height:400px;   
  background-color:black;   
  background-image:url(mm.jpg);   /* 图片原尺寸150 * 225 */
  background-repeat:no-repeat;   
  background-position:50% 50%;  
}

百依百顺background-position: 八分之四二分之一您用的超级多,那是让背景图片居中,相当于center center。

效果如下:

图片 6

只要四分之二是遵守图片的尺寸(150 * 225)来测算的,那么其值转变为像素值应该是75px 112.5px,你以为背景图片能在400 * 400的块里居中呢?答案很扎眼,是或不是认的,那是什么总括的吧?

实则官方说法是这么的:

当背景图片尺寸(background-size)不做其余的重新初始化(也正是100%百分之百)时,水平百分比的值等于容器宽度百分比率减去背景图片宽度百分比率。垂直百分比的值等于容器高度百分比率减去背景图片中度百分比率。

水平位置: (400 - 150) * 50% = 125px
垂直位置: (400 - 225) * 50% = 87.5px

2、margin相邻折叠难点

在支付中,大家有时会遇上刚毅多个div都安装了margin,可是它们之间的偏离便是不对等八个div的margin之间的和,那是为何呢?其实是因为在一些情形下,五个或五个块成分的隔壁边界(其间未有其它非空内容、padding、边框)会时有爆发合并成单后生可畏边界,也正是标题说的折叠。

先来会见兄弟块级成分的折叠,如下图所示:

图片 7

dfasdfsadfwer.jpg

还要注意的是,父成分与其子成分之间也会生出折叠:

图片 8

2个或两个块级相邻元素的异域距(margin)的折叠准绳:

  • 异域距都为正值时,取最大值
  • 不全部是正值时,则用正在减去(全数值的相对化值中)最大值
  • 全为负值时,则取最小值

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:关于CSS一些细节问题,你真的了解background

关键词: