[译]CSS-理解百分比的background-position
2016-05-29 16:57
477 查看
通过这篇文章能够深刻理解 background-position 的百分比
通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的
摆放图片
通常在容器里摆放图片是给出具体图片的
在CSS中很容易做到。
在容器里使用
或者可以使用
2.在容器里移动
现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片
然后得到
3.图片比容器大
到目前为止,我们讨论的问题都很简单。现在,我们要看看图片比容器大的情况。容器必须要被图片填满。
同样我们可以算出
你可以搞明白正值和负值的关系,也可以凭直觉搞定。当你看到
4.不变量
好了,现在你已经写好了位置点并且没有任何问题。现在,因为某些原因,我们不用长方形容器了,用正方形容器。那么之前的那些位置值就不那么合适了。
我们之前计算的值不再有效,因为现在情况变了。你想要改变图片和容器大小也是一样的道理。
可以从图中看到,如果使用固定的值,那么一旦改变某些条件,那么就可能会让已经写好的布局乱掉。
1.定义
我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时,
这两个例子分别就是 0% 和 100% 的情况:
我们很容易得到两者之间的值
2.范围检测
这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。
3.不变量
我们画两个轴,一个对于容器,一个对于图片。如果我们设置值为
就像上面的图片一样,这个新的方法在不同比例大小情况下也工作得很好。
4.水平和垂直
如果你细心的话你会注意到图片和容器一样大的话,两个轴会完全重合。设置 30% 还是 80% 都不重要。
再看看数学公式
你只需要设置两个值
一开始,我没有明白百分比值是怎么对
通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的
background-position值来解决一些问题。
通常使用方法
摆放图片通常在容器里摆放图片是给出具体图片的
top、
left相对容器的
top、
left的值。
在CSS中很容易做到。
在容器里使用
<img>标签
.container{ position:relative; } .container img{ position:absolute; top:12px; left:20px; }
或者可以使用
background-position
.container{ background-position:12px 20px; }
2.在容器里移动
现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片
top、
left的最大值。
然后得到
left值的范围是 0 到
container_width - image_width,同样也可以得到
top值的范围。
3.图片比容器大
到目前为止,我们讨论的问题都很简单。现在,我们要看看图片比容器大的情况。容器必须要被图片填满。
同样我们可以算出
left值的范围是 0 ~
container_width - image_width,只不过这次
container_width - image_width是负值。
你可以搞明白正值和负值的关系,也可以凭直觉搞定。当你看到
12px 20px你很容易知道图片是怎么放置的。但是,你看到
-12px -20px就比较难想明白了。
4.不变量
好了,现在你已经写好了位置点并且没有任何问题。现在,因为某些原因,我们不用长方形容器了,用正方形容器。那么之前的那些位置值就不那么合适了。
我们之前计算的值不再有效,因为现在情况变了。你想要改变图片和容器大小也是一样的道理。
可以从图中看到,如果使用固定的值,那么一旦改变某些条件,那么就可能会让已经写好的布局乱掉。
背景图片的百分比方法
1.定义我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时,
left是
0%。当图片右边框和容器的右边框挨着时,
left是
100%。
这两个例子分别就是 0% 和 100% 的情况:
我们很容易得到两者之间的值
left = (container_width - image_width) * percentage
2.范围检测
这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。
3.不变量
我们画两个轴,一个对于容器,一个对于图片。如果我们设置值为
60%,则两个轴的
60%会重合在一个点上。
就像上面的图片一样,这个新的方法在不同比例大小情况下也工作得很好。
4.水平和垂直
如果你细心的话你会注意到图片和容器一样大的话,两个轴会完全重合。设置 30% 还是 80% 都不重要。
再看看数学公式
left = (container_width - image_width) * percentage = 0 * percentage = 0
你只需要设置两个值
left、
top就行了。
总结
一开始,我没有明白百分比值是怎么对 background-position作用的。我真的有点迷惑,因为使用百分比让我不能直观地感受到变化。然而,后来我发现使用百分比解决图片定位是极其方便的。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''