CSS31背景属性之背景图片定位以及百分比单位定位原理详解

给大家总结归纳一些CSS的背景属性，以及CSS3有哪些新增的背景属性。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的嘉陵网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

要调整背景图的渲染尺寸，需要用到background-size这个样式规则，但这是CSS3新增的，所以目前暂时没有全兼容的解决方案。

background ：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。

如何调整css背景图片的位置

首先新建一个html文件，命名为test.html，在test.html文件中，使用div标签创建一个模块，用于测试。在test.html文件中，给div标签添加一个class属性，用于下面样式设置。

bottom left 设置背景图案出现在下左方。bottom 设置背景图案出现在正下方。bottom right 设置背景图案出现在下右方。

第一步，打开前端开发工具，然后创建一个新的html代码页，见下图，转到下面的步骤。

可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。

全部的位置代码如下：background-position： left； 代表背景图横向（X轴）靠左，纵向（Y轴）居中。（9点钟位置）background-position： right； 代表背景图横向（X轴）靠右，纵向（Y轴）居中。

，background-color 规定要使用的背景颜色。2，background-position 规定背景图像的位置。3，background-size 规定背景图片的尺寸。4，background-repeat 规定如何重复背景图像。

css背景图定位截取

你用的是精灵技术，这需要定位position定位，设置一个长度和宽度，然后设置该图片为背景，然后定下位就可以了。

其中right和left的位置就是你想要的答案。如果是简单的想背景图居左就是left，上就是top依次类推，但常用的是通过数值，按照X和Y轴进行定位。最重要的一步就是值的设定，再准确点，就是负值的设置。

background：url() left top no-repeat；用这样的，left top 你自己可以根据图片自己定义的。

实现方法：首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。

你查查background-position并练习一下就知道了，背景图的两个偏移值可以用background-position： x y；表示。x是水平位置偏移，y是垂直位置偏移。你可以用坐标来理解，图片左上角的坐标就是0 0。

本文标题：css样式图片背景定位 css样式中怎么设置图片位置
浏览地址：http://ybzwz.com/article/dijipod.html