标签：垂直 关键字 background 方向 position 取值 css

background-position属性在css中用来设置背景图片的位置，它通过设置水平方向和垂直方向的取值来到达效果

background-position的常见三种定义方式

1.关键字取值 

        通过使用关键字来定义图片的位置。其中

水平方向的关键字有left(左) center(中) right(右)

垂直方向的关键字有top(上) center(中) bottom(下)

使用方法，一般情况下先定义水平方向的关键字 然后定义垂直方向的关键字

background-position: left bottom/*这个样式设置的是水平方向的左 垂直方向的下 所以图片最终位置会在左下角*/

使用关键字来定义背景图片的位置虽然较为简单，但使用范围小，不能完整的作用到全部地方

2.百分比取值

 使用百分比取值来定义位置的时候也是定义水平和垂直两个方向的值。百分比取值也有默认的绝对位置

水平方向 0%(左) 50%(中) 100%(右)

垂直方向 0%(上) 50%(中) 100%(下)/*这六个值是默认的绝对位置的值*/

使用方法和关键字取值的使用大同小异，只不过百分比取值来定义位置会相对更加细致和精准

background-position: 0% 60%;
/*这里的参数表示水平方向靠左 垂直方向中间偏右*/

3.像素值取值

使用像素值的取值来定义图片的位置会使得图片的位置更见精准，同样也是通过设置水平方向和垂直方向来实现

像素值没有绝对的默认数值，它需要结合实际情况去调整数值

当设置的值为正数的时候 水平方向向右偏离 垂直方向向下偏移

当设置的值为负数的时候 水平方向向左偏移 垂直方向向上偏移

background-position: 80px -30px;
/*默认设置的值都是先设置水平方向 然后设置垂直方向
这里的水平方向的值为正数 所以图片在水平方向往右偏移 
垂直方向的值为负数 所以图片往上偏移
*/

标签：垂直,关键字,background,方向,position,取值,css
来源： https://blog.csdn.net/aibai666/article/details/121846067

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。