[分享]css中 背景图片的定位方法

CSS 中的背景图片是可以通过定位的方式进行控制的，我们可以通过设置背景图片的位置来达到想要的效果。本篇文章将介绍 CSS 中背景图片的定位方法，希望对大家有所帮助。 背景图片定位方法 首先，我们需要...

CSS 中的背景图片是可以通过定位的方式进行控制的，我们可以通过设置背景图片的位置来达到想要的效果。本篇文章将介绍 CSS 中背景图片的定位方法，希望对大家有所帮助。
背景图片定位方法
首先，我们需要使用 CSS 属性 background-image 来设置背景图片的 URL，然后使用 background-position 属性来定位图片在元素内部的位置。background-position 属性有两个值，分别是横向位置和纵向位置，可以使用关键字或者百分数值进行设置。例如：
pre { background-image: url('bg.jpg'); background-position: center top; }
这里设置了一个图片的背景，并将其位置在元素的顶部中心。如果要将图片设置为右下角，可以使用下列代码实现：
pre { background-image: url('bg.jpg'); background-position: right bottom; }
当然，除了使用关键字外，还可以使用像素值或者具体方位来进行设置。例如：
pre { background-image: url('bg.jpg'); background-position: 50px 20px; }
这里的 50px 表示距离左边界 50 像素的位置，20px 则表示距离上边界 20 像素的位置。
另外，我们还可以使用 background-origin 属性来规定背景图片的起始位置。background-origin 属性也有三个值可以选择，分别是 content-box、padding-box 和 border-box。默认值为 padding-box，即从内边距开始显示图片。例如：
pre { background-image: url('bg.jpg'); background-position: 50px 20px; background-origin: content-box; }
这里的 background-origin 属性设置为 content-box，背景图片会从内边距开始显示。
总结
本文介绍了 CSS 中背景图片的定位方法，通过设置 background-position 属性和 background-origin 属性可以控制背景图片在元素内部的位置和起始位置。希望本文对大家有所帮助。