菜单

深入领悟this

2018年12月14日 - CSS/CSS3

深刻掌握 background-position 中之百分比

2015/11/02 · CSS

本文由 伯乐在线
risker
翻译。未经许可,禁止转载!
英文出处:vjeux。欢迎插手翻译组

经这首作品我如若叫我们解决一个曾大烦自己之累问题。大家要采用比例底
background-position价来化解部分题目。

https://www.cnblogs.com/pssp/p/5216085.html,顶尖好的相同首介绍this的稿子

日常采取模式

  1. 布置图片
    经常在容器里摆图片是深受出切实可行图片的topleft相持容器的topleft的值。
    图片 1
  2. 当CSS中好爱得。
JavaScript

\* 在容器里使用\`<img>\`标签 .container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010c3463746966-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010c3463746966-1" class="crayon-line">
    *   在容器里使用`&amp;amp;amp;lt;img&amp;amp;amp;gt;`标签
</div>
<div id="crayon-5b8f6d12010c3463746966-2" class="crayon-line crayon-striped-line">
.container{
</div>
<div id="crayon-5b8f6d12010c3463746966-3" class="crayon-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


`</pre> position:relative; } .container img{ position:absolute; top:12px; left:20px; }`  


JavaScript

\* 或者可以使用\`background-position\`&lt;pre&gt;\`.container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010cc478883379-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010cc478883379-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010cc478883379-1" class="crayon-line">
*   或者可以使用`background-position`&amp;lt;pre&amp;gt;`.container{
</div>
<div id="crayon-5b8f6d12010cc478883379-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


background-position:12px 20px; }\`
  1. 每当容器里倒今你想被图片在容器内走同时还无克过容器边界。你一定是只要简单算一终于图片topleft的极要命价值。图片 2然后取left价的克是
    0 到 container_width - image_width,同样也得得top价的限量。
  2. 图片比容器大到最近结束,大家谈论的题目都异常粗略。现在,我们要看图片比容器大之情景。容器必须要给图片填满。图片 3同等咱们可算出left价的限是
    0 ~
    container_width - image_width,只但是本次container_width - image_width
    是负值。你可来懂在和负值的涉及,也得以凭直觉搞定。当您望12px 20px卿极度易精晓图片是怎放的。不过,你看看-12px -20px即使比麻烦想知道了。
  3. 勿变量好了,现在而就写好了地点点并且没有此外问题。现在,因为一些原因,我们不用长方形容器了,用正方形容器。那么此前的那一个地方值就是无那么方便了。我们前算的价值不再实用,因为今景象易了。你想使改图片及容器大小也是同的道理。图片 4可以自图中见到,假如应用一定的值,那么只要改变一些规则,那么就是可能相会叫已写好的布局乱掉。

    背景图片的比例方法

  4. 概念我们设变一个确定图片地方的主意了。当图片的左侧框和容器的右侧框挨着时,left0%。当图片右侧框和容器的入手框挨着时,left100%。这半独例证分别就是
    0% 和 100%
    的情景:图片 5俺们充足易得两者之间的值

JavaScript

\`left = (container\_width - image\_width) \* percentage

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d1355851788-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d1355851788-1" class="crayon-line">
`left = (container_width - image_width) * percentage
</div>
</div></td>
</tr>
</tbody>
</table>


 
  1. 克检测这主意极其便宜之就是大家决不再行算图片相对容器的限制。它就是 0
    ~ 100 。
  2. 不变量大家描绘六只轴,一个于容器,一个于图片。倘使我们设置值为60%,则鲜只轴的60%晤面重合在一个点达。图片 6便像面的图纸相同,那个新的方法在不同比例大小情况下吧工作得不得了好。
  3. 水平和垂直如果您仔细的语你相会小心到图片与容器一样很的言辞,两独轴会完全重合。设置
    30% 仍旧 80%
    都不紧要。图片 7复望数学公式
JavaScript

\`left = (container&lt;em&gt;width - image\_width) &lt;/em&gt;
percentage = 0 \_ percentage = 0

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d5992620587-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d5992620587-1" class="crayon-line">
`left = (container&lt;em&gt;width - image_width) &lt;/em&gt; percentage = 0 _ percentage = 0
</div>
</div></td>
</tr>
</tbody>
</table>

汝一味待设置六个价值lefttop就行了。

总结

一如既往先河,我没有亮百分比率是怎对background-position图的。我真正有些迷惑,因为用百分较吃自身无可知直观地感受及转。不过,后来己发现使用比例化解图片定位是无比方便之。

我的博客,欢迎订阅

微博粉丝无比少,求粉

1 赞 3 收藏
评论

关于作者:risker

图片 8

2014年大学毕业,现在在首都某个互联网公司以前端开发的做事,近一半年重点做运动web开发。和讯粉丝太少,求粉。

个人主页
·
我之章
·
7
·
  

图片 9

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图