css中background-position属性

本文主要是介绍css中background-position属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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;
/*默认设置的值都是先设置水平方向 然后设置垂直方向
这里的水平方向的值为正数 所以图片在水平方向往右偏移 
垂直方向的值为负数 所以图片往上偏移
*/

这篇关于css中background-position属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！