`
crazier9527
  • 浏览: 1010999 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用CSS定位背景图片 background-position

阅读更多

 

来源:互联网 作者:佚名 时间:12-17 14:15:55   
点评:我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片;

又如:

html/css教程:背景图片的定位问题详解_中国教程网

这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽

那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:

我们知道在用图片作为背景的时候,css要这样写以div容器举例子,也可以是body、td、p等的背景,道理一样。

代码:

div{ background:#FFF url(image) no-repeat fixed x y;}

这里的background的属性值依次为:

#FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
image 背景图片:(这里是图片的地址)
no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)

背景图像定位中我们要明确的几点:

1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就是x轴方向,这时y轴方向就默认的是上下居中对齐,也就是center。
2、坐标轴的原点就是对应容器的左顶点
3、这个坐标的y轴箭头朝下,也就是右下方(容器内部)x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值。
5、x y的值可以用百分比或者px来表示。
6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示,但注意:用“left、right、top、bottom、center”来表示的时候,应用的是对齐规则,而不是坐标规则。x为left是表示图片的左边和容器的左边对齐,为right的时候表示图片的右边和容器的右边对其,y为top的时候表示图片的顶部和容器的顶部对齐,为bottom时表示图片的底部和容器的底部对齐,x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候,其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义,x为负数时候表示图片左顶点在容器左顶点的左侧,y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。

下面我用几个图示来说明一下几种情况,蓝色块表示图片,虚线框表示容器(可以div,td,或者直接就是body),注意只有背景图片在容器内我们才能看见,我用白色表示可见部分,而且超出容器范围的是看不见的,我用灰色表示。容器的左定点的坐标就是(0,0)。

html/css教程:背景图片的定位问题详解_中国教程网
第一张,背景图片和容的左上对齐,0px 0px 也可以写成left top

html/css教程:背景图片的定位问题详解_中国教程网
第二张,背景图在容器中间,定点坐标为正值

html/css教程:背景图片的定位问题详解_中国教程网
第三张,背景图部分在容器左上,定点坐标为负值

--------------------------------------------------------------------------- 

到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片,返回去我们看一下开始的时候介绍的两个图片,我们就是可以用:背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。

但是我们为了调用方便,在排列这些小图片的时候要讲究一点规则,比如:小图之间的距离通常是调用小图的容器的大小,或者距离更大一点,这样就可以避免在容器内显示出我们不愿意显示的图片!

补充一点,如果定位用的是百分比话,算法比较特殊。我举个例子:

 

代码:

background:#FFF url(image) no-repeat fixed 50% -30%;

 

这个时候图片应该在容器的什么位置呢,算法公式如下:

图片左顶点距容器左顶点的坐标位置为 
x:(容器的宽度-图片的宽度)x50% 
y:(容器的高度-图片的高度)x(-30%) 
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。 

比如:容器是width:600px;height:600px;而图片是width:200px;height:200px; 
我们用上面的样式,可以得到图片位置为: 
x:(600px-200px)*50% 
y:(600px-200px)*(-30%) 
如下图:

html/css教程:背景图片的定位问题详解_中国教程网

 

 

 

以左上角为坐标原点

加入你需要把图片上距左边40PX 距上边10PX的图片显示出来<DIV CLASS="m"></div>

.m{ background:url(img/01.jpg) no-repeat;background-position:-40px -10px}

 

前面的总看得懂吧 解释下这句

background-position:-40px -10px 

背景想左偏移40PX 向上偏移10PX

m有多大就显示多大的图片出来

 

参考资料:

http://www.jb51.net/css/23213.html

http://hi.baidu.com/xinliang211/blog/item/2742802e360ea55d4fc226b3.html

 

 

 

 

分享到:
评论

相关推荐

    CSS中背景background-position负值定位

    CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

    CSS中背景图片定位方法:background-position的用法

    在CSS(层叠样式表)中,背景图片的定位是一个重要的设计元素,它允许开发者将图像设置为元素的背景,并精确控制其显示位置。`background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像...

    批量输出 CSS background-position 属性的定位像素值

    这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是在进行自动化处理或批量优化项目时的需求。这可能是为了统一网站风格,调整多个元素的背景图像...

    background-position 的学习.zip

    总之,`background-position`是CSS中的一个强大工具,它使得背景图像的定位变得灵活多变,极大地丰富了网页的视觉表现力。无论是简单的定位还是复杂的交互效果,都能得心应手地实现。理解并熟练运用`background-...

    关于背景图片的定位(background-position)

    另外,CSS3引入了更多高级特性,比如`background-position-x`和`background-position-y`,分别独立设置水平和垂直方向的定位。 为了更好地理解`background-position`,我们可以参考示例代码: ```css .example { ...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `&lt;bg-image&gt;` 值,每个值可以是 `none...

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    css 之 background-position-x

    css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...

    CSS background-position的使用说明详解

    总之,`background-position`是一个强大的CSS属性,提供了丰富的选项来定位背景图像,无论是通过精确的像素值还是灵活的百分比,都可以实现从简单的对齐到复杂的布局设计。在创建网页时,熟练掌握`background-...

    CSS background-position 属性 定位图片

    在上面的代码中,我们使用 background-position 属性将背景图片定位在左上角(0 0)。如果我们想将背景图片定位在右下角,可以将 background-position 属性的值设置为 100% 100%。 效果 使用 background-position ...

    css3背景图片指定显示位置

    综上所述,CSS3的`background-position`属性及其相关属性提供了强大的背景图片定位功能,让开发者能够创造出富有创意和个性化的网页设计。在实际工作中,熟练掌握这些知识点将极大地提高网页设计和开发的效率和质量...

    CSS背景background、background-position使用详解

    - `background-origin`:定义背景图片的定位点,可以是`padding-box`(默认,从内边距框开始)、`content-box`(从内容框开始)或`border-box`(从边框框开始)。 - `background-clip`:控制背景绘制的区域,可以是`...

    CSS中背景background-position负值定位深入理解[图文]

    在CSS中,背景图片的位置可以通过`background-position`属性来调整,这个属性允许我们将背景图片放置在元素内的任意位置。在给定的例子中,我们深入探讨了如何使用负值来实现更精细的定位。 首先,我们要了解`...

    css代码添加背景图片常用代码

    可以通过百分比或像素值进一步精确定位背景图片的位置,例如`background-position: 50% 25%;`。 #### 六、综合样式:`background` **语法**: ```css {background: 颜色值 | 图片URL | 重复方式 | 固定或滚动 | ...

Global site tag (gtag.js) - Google Analytics