新蒲京200.c软件下载-app官网网址 > 工具建设 >

禁绝转发

深切驾驭 background-position 中的百分比

2015/11/02 · CSS

本文由 伯乐在线 - risker 翻译。未经许可,禁止转发!
România语出处:vjeux。迎接参加翻译组。

经过那篇作品笔者要教大家消除二个后生可畏度比相当的苦恼本身的难为难点。大家要利用比例的 background-position值来缓和部分主题材料。

平日使用方法

  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. 水平和垂直纵然你细心的话你会静心到图片和容器雷同大的话,七个轴会完全重合。设置 60% 依然 百分之七十都不首要。图片 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

2016年大学结束学业,今后在京都某互联网公司从事先端开采的专门的工作,近7个月重点做活动web开荒。博客园观者太少,求粉。 个人主页 · 笔者的散文 · 7 ·   

图片 9

下一篇:没有了