【CSS基础】关于background-position
来源:互联网 发布:苹果笔记本mac有光驱吗 编辑:程序博客网 时间:2024/05/14 19:26
background-position 的取值 有几种情况(在此之前请先去阅读关于background-origin的信息)
关键字: center top right bottom left(可以用百分比转换)
长度值: 这个长度值解释为 从内边距区左上角的偏移。便宜点是背景图像的左上角。
background-position: 20px 30px;
说明背景图像的左上角这个点 位于 距离元素内边距左上角点(起始位置)右边20像素,向下30像素的位置。(这里的前提是background-origin值是默认的padding-box,起始位置为padding-box的左上角。这个起始位置如果background-origin不同则会不同,请点击background-origin)
百分比: 其实the key of the article is the percentage.这个百分比并不是我们想象的背景图像的左上角的点,离元素的起始位置点的偏移。
按照《css权威指南的解释》就是百分数值同时应用于元素和背景图像。比如代码长这样:
p { background-image: url(xxx.gif); background-repeat: no-repeat; background-position: 33% 66%;}
这个xxx.gif的位置是在哪里? 可以这样说: 相对于背景图像来说,向右33%(背景图像的宽度), 向下66%(背景图像的高度)的这个点,与元素的内边距去左上角(默认background-origin为padding-box的起始位置)向右33%(元素的宽度), 向下66% (元素的高度)的这个点 是重合的!
还是mdn上的英文好理解的一点:
With a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of the box’s padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of padding area. With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
tip: background-position会影响background-repeat的初始位置。
参考资料: MDN->background-position,《css权威指南》
- 【CSS基础】关于background-position
- CSS学习:关于background-position
- CSS background-position Property
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position 属性
- CSS background-position用法
- CSS background-position属性
- CSS中background-position详述
- background-position css图片平铺
- CSS定位背景图片 background-position
- CSS精灵 background-position用法
- CSS之background-position属性
- 小论CSS之position, background-position
- HTML5基础加强css样式篇(文本裁剪,背景裁剪:background-origin,background-position,background-clip)(三十七)
- 【CSS学习】CSS背景background、background-position使用详解
- CSS 关于 BACKGROUND
- java day5
- 浅谈继承与多态
- Android studio 安卓炫酷动画整合
- 最大子数组 by Haskell
- TCP编程
- 【CSS基础】关于background-position
- Linux系统内存管理之伙伴系统分析
- 三、简单刷题APP(题库是Excel)之在APP添加题目
- Fragment的调用方式
- 最短路径的两种算法
- 仿printf实现
- ip地址定位2
- 基础测试理论与实践-连载(一):写的背景与动机
- bash 基本技巧