精华内容
下载资源
问答
  • 语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
  • CSS background-position属性

    千次阅读 2017-11-27 22:43:39
    一、坐标系及原点就像CSSposition属性是定位元素一样,background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片(注意,这里并不是定位由background-color定义的背景颜色)...

    一、坐标系及原点

    就像CSS的position属性是定位元素一样,background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片(注意,这里并不是定位由background-color定义的背景颜色)。


    它的格式基础模型为:

    background-position:xpos ypos;

    其中xpos表示x轴(水平位置)方向的坐标,ypos表示y轴(垂直位置)方向的坐标。


    学过数学的看官可能有疑问了,既然引出了坐标系,那么它的坐标原点在哪里?


    问题的答案是:坐标原点的位置是由background-origin属性控制的。默认情况下,它的原点是拥有该背景图片元素的左上角的padding-box(内边距盒模型)区域。


    那么坐标点呢,是背景图的那个部分呢?你猜猜………..


    对就是背景的左上角的点。

    这里写图片描述
    背景图片的坐标点
    背景图片的坐标点

    图片来源于:http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html](http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html

    坐标原点右侧xpos的值为正数,左侧为负数;下侧ypos的值为正数,上侧为负数。


    二、属性值的类型

    background-position属性的值分为三类。

    第一类是绝对值类型的值,这里的绝对值并不是数学意义上的绝对值,而是有具体单位的值,比如px、em、rem、ch等单位。
    比如:

    background-position:50px 30px;
    background-position:-10px 20px;
    background-position:-10px 2em;

    第二类是关键字类型的值。它们有表示水平方向的left、center、right;表示垂直方向的top、center、bottom。
    比如:

    background-position:top right;
    background-position:top center;
    background-position:center center;

    这里剧透一下,这里的关键字top和left表示相应坐标方向的0%(下面要讲解的第三类值:百分比),center表示50%,bottom和right表示100%。


    第三类是百分比类型的值。这里会有一个误解,就是你可能以为这里的百分比表示的是坐标点(背景左上角的点)相对于背景元素大小的百分比的位置

    你眼中的位置百分比表示方式

    你眼中的百分比位置的表示方式

    就像是好的故事总是给人意想不到的结局一样,这里的百分比并不是你意淫的上面的表示方式。

    故事要从这里说起:W3C规范是这样说的

    A percentage for the horizontal offset is relative to (width of
    background positioning area - width of background image). A percentage
    for the vertical offset is relative to (height of background
    positioning area - height of background image), where the size of the
    image is the size given by ‘background-size’

    英文不好的我只能借鉴别人的翻译了:

    水平百分比的值等于容器宽度(拥有此背景的元素)百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

    正确的位置百分比表示方式
    (原文翻译及图片出处:http://www.w3cplus.com/css/background-position-with-percent.html

    上图中,经过我们人类可以理解的方式解释就是:背景图片相对于自身长度为的75%,宽度为50%的点,和背景容器相对于自身长度为的75%,宽度为50%的点重合。


    那么这样的话,我们就可以知道:

    • background-position:50% 50%;是把背景图片放到背景容器的正中央
    • background-position:0% 0%;是把背景图片放到背景容器的左上角(两个左上角的点重合)
    • background-position:100% 100%;是把背景图片放到背景容器的左下角(两个左下角的点重合)
    • ……

    三、其他

    意犹未尽啊!鉴于狗仔一扒到底的精神,接下来我会继续爆料关于background-position这位明星的一些私人空间。下面是花边新闻:

    • 默认的background-position的值是background-position:0% 0%;

    • background-position属性可以只写一个值。

      比如,background-position:50px;

      那么50px表示水平方向的值,垂直方向的值默认为center。
      相当于

      background-position:50px center;

      background-position:50px 50%;

    • 上面介绍的background-position三种类型的值可以随意组合着写。

      比如:
      background-position:50px bottom;
      background-position:50px 10em;
      background-position:50px 10%;

    • background-position属性的四值模式:可以用关键字top,bottom和left,right改变background-position的定位机制。

      比如:background-position:right 20px bottom 50px;

      表示背景图片距离背景容器右边(right)为20px,距离底边(bottom)为50px

    • 为了适应background-image的多个图片,background-position也可以为多个背景图设置值,用逗号分隔多个值。

      比如: background-position:2px 3px,5px 8px;


    四、结语

    所谓站在巨人的肩膀上会看得更清楚。上述总结只不过是我查阅网上的一些资料整理加上自己的理解所写。感谢上述引用的网站提供的图片和知识。多谢他们的无私分享。知识在于积累,灵感来源于分享!

    原文链接

    展开全文
  • css background-position 设置背景图居中

    千次阅读 2019-02-01 00:48:41
    background-position: center center;  
    background-position: center center;

     

    展开全文
  • CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来
  • css background-position负值定位解析

    千次阅读 2017-01-03 19:54:48
    相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。  起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,... 要想实现CSS抠图,只需要用到一

    相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。

           起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用。。。

           其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键。

           要想实现CSS抠图,只需要用到一个属性:background-position。

           按照字面理解,这个属性就是背景定位,先看看google网站的素材图,如下:

           假如小菜现在想做一个+1按钮,利用上边的素材图,普通状态显示A图,鼠标移上去显示后显示B图,实现这么一个动态效果。

           按钮是用来实现功能的,一般是用超链接响应单击事件,但是不能把背景图直接加在超链接上,那样就不叫样式啦,因为超链接的文本长度变化时,样式也变了。

           地球人一般的做法是,div里边套一个超链接,超链接负责实现功能,div负责装载背景图。html结构如下:

    1 <div class="btn"> 2 <a href="http://www.kpdown.com">+1</a> 3 </div>

     

           有了html骨架,接下来就要写css样式啦。

           假如我们什么都不考虑,直接把整张图片设为背景,样式如下:

    1 .btn{
    2     background:url(bg.png);
    3 }

     

           效果如图:

           div是块级元素,默认是占一行的,这个先不用关心,但看到背景图重复了,这显然不是我们想要的,加上background-repeat:no-repeat;属性,改进样式如下:

    1 .btn{
    2     background:url(bg.png);
    3  background-repeat:no-repeat; 4 }

     

           这样就不重复了。

           div可以理解成一个矩形框,它的左上角是顶点,背景图片的顶点也是左上角,div加载背景图时,会把两个顶点重合,顶点的坐标是(0,0)。不理解的看图,很简单的。。。

     

           +1的小图片混杂在大图中,想提取出来,需要用background-position属性,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置,如下图:

           这样一来,div中显示的就是小图了,但是,显示的还不仅仅是小图,而是图中阴影部分,怎么办呢?设置一下div的宽、高,让它和小图的宽、高一样就可以了呗!!

           再来看看background-position属性,它有两个参数,分别是水平方向移动的像素、竖直方向移动的像素,都用负数表示。大图不动,div移动,也只能是向右、向下移动,只要记住这两个方向移动的像素都用负数表示就行了!

           因此,只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。小菜也不用什么专业工具,用截图就很方便,从大图左上角顶点开始截,到小图顶点那停下来,一看像素就差不多了,然后再调试调试,基本就搞定。

           在本例中,A小图的位移是:-25px -374px,A小图尺寸是:24px 16px。因此,css样式如下:

    复制代码
    复制代码
    1 .btn{
    2     background:url(bg.png);
    3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7 }
    复制代码
    复制代码

     

            效果如下:

            这样就算是把小图抠出来啦!简单吧!!

            先解释个问题,图片上有+1,而我又在超链上写了一个+1,这是因为很多时候文本内容不是写在图片上的,那样灵活性太差,文本就是文本,小菜为了给大家一个完整的演示,因此又写了一个+1,接下来就处理它!

            先把+1居中,居中分为水平居中和垂直居中,水平居中超链接,需要在div上设置text-align:center;,这个属性是对子节点而言的;垂直居中div中的超链接,只需要把a标签的line-height属性设成和div的高度一样即可。样式如下:

    复制代码
    复制代码
     1 .btn{
     2     background:url(bg.png);
     3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11 }
    复制代码
    复制代码

     

            效果如下:

     

           接下来呢,还有问题,我们可以发现,只有当鼠标移到+1文本上时,鼠标才会变成手型,才能响应事件。

           这显然不是我们想要的,应该是鼠标移入图片时,确切的说是鼠标移入div时,就可以变成手型,也能响应事件。

           这也简单,只需要在a标签(超链接)上加display:block;属性即可。

           另外这个下划线比较碍眼,用text-decoration:none;属性去掉,很常见,就不多说了。

           样式如下:

    复制代码
    复制代码
     1 .btn{
     2     background:url(bg.png);
     3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 }
    复制代码
    复制代码

     

           接下来就剩最后一件事了,那就是鼠标移入的时候切换背景。

           本例是div里边套a标签,鼠标移入换背景,当然是指鼠标移入div,而且换背景也是换div的背景,可不是a标签的哦!!

           因此要在div标签上调用hover,div的样式是btn,因此写成.btn:hover{}。

           换背景还需要找到背景图片,这又需要抠小图了,也就是抠上边指出的B图。

           刚刚显示的是A小图,B小图和A小图在同一水平线上,因此竖直方向的移动像素是相同的,水平方向差不就是A小图的水平像素加上A小图的宽度。

           经过测试,B小图的位移是:-50px -374px,尺寸大小就不用关心了,肯定和A小图一样,不一样就没法做了。

           把B小图的定位background-position:-50px -374px;放在.btn:hover{}里即可。

           样式如下:

    复制代码
    复制代码
     1 .btn{
     2     background:url(bg.png);
     3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 } 14 .btn:hover{ 15  background-position:-50px -374px; 16 }
    复制代码
    复制代码

     

            最终效果-鼠标移入之前:

       

            最终效果-鼠标移入之后:

      

           好啦,教程到这就结束了,小菜只是简单的演示了一个完整的制作流程,中间还有很多细节问题,比如浏览器兼容、CSS优化等等,这就需要读者自己探索了。

           其实小菜一直在说的CSS抠图,真正的技术名叫CSS Sprite技术,国人习惯叫CSS精灵。

           这种技术有好处也有坏处,好处是由于图片都放在一起,请求时只需请求一张图片,减少了与服务器的交互次数,还可以解决hover延迟加载的问题。坏处就是不好控制,扩展性不太好,以后有改动,可谓是牵一发而动全身,而且有时会因为屏幕分辨率不同出现背景断裂现象。

    展开全文
  • CSS background-position 背景定位的用法

    千次阅读 2017-05-01 09:46:04
    要实现CSS抠图,只需要用到一个属性:background-position。小ICON在大图中,想提取出来,需要用background-position属性,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置background-...

    网页中很多图片素材被合成在一张图片上,然后使用背景定位来获取对应的图标。要实现CSS抠图,只需要用到一个属性:background-position。

    2017-05-01 09.20.22-1.png

    2017-05-01 09.20.22-2.png

    小ICON在大图中,想提取出来,需要用background-position属性,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置

    2017-05-01 09.20.22-3.png

    background-position属性,它有两个参数,分别是水平方向移动的像素、竖直方向移动的像素,都用负数表示。大图不动,div移动。

    .test{
         background:url(bg.png);
        background-repeat:no-repeat;
       background-position:-25px -200px;
        height:24px;
        width:24px;
     }
    展开全文
  • cssbackground-position-x
  • 批量输出 CSS background-position 属性的定位像素值
  • css background-position 偏移的问题

    千次阅读 2014-03-29 03:00:54
    今天有个界面调整的工作要做,美工设计了一个导航栏,其中的按钮是用了一张大图,然后用背景偏移来给每个按钮加上不同的图标,...我们来看css: .icon{background:url(imgs/homepage-icon.png)} .app1{background...
  • 前言:大家肯定都试过给元素添加背景background,并且用的绝对不少,但是其中的background-position,你真的了解吗? 我们往往要把页面的中的众多图标合并成一张雪碧图,已减少对服务器的图片请求次数。pc端处理...
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...
  • background-positionbackground-repeat等属性不起作用。原因是在css文件中 url(xxxxx ) no-repeat;是分开定义的。而且background定义到background-positionbackground-repeat后面了,把background放在前面问题...
  • 主要介绍了CSS背景backgroundbackground-position使用方法,需要的朋友可以参考下
  • 这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
  • css background-position 图片整合技术

    千次阅读 2016-01-25 16:00:36
    当网页中存在多个小图片 比如logo ,菜单图片...图片整合技术(CSSSprites):将导航背景图片,图片按钮背景图片等有规则的合并为一张背景图,即多张图片合为一整张图,然后用background-position来实现背景图的定位技术。
  • 本章节分享一段代码实例,它实现了利用background-position属性控制背景图片实现动画效果。 背景图片都集中在一张图片上,如下: <!doctype html> <meta charset="utf-8"> 蚂蚁部落 * {  padding: 0px;...
  • background-size background-position 属性
  • 我们知道background-position的取值可以是关键字、像素或百分比等,但不可以将像素或百分比等单位与关键字混合使用,这样可能会导致css失效。尤其要说的一点是,如果应用百分比的话,background-position: 0, 20%; ...
  • 详解background-position

    千次阅读 2018-05-02 21:26:57
    你真的了解background-positionbackground属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-attachment、background-position、...
  • 背景图片的各种属性: 1、background-repeat:设置图片平铺方式。有三个属性:no-repeat...2、background-position:确定图片显示的位置。 background-position: 30px 50px; 图片在水平方向上向右偏移30px,在垂
  • .userimg { display: inline-block; width: 36px; height: 36px; border-radius: 100%;... background: url(img/bg_base_spr24.png) no-repeat -100px 0; vertical-align: top; margin-rig
  • 背景图片设置了background-position之后,其他的内容区在浏览器缩放的时候就移位了,如下图, 要怎么设置它们才能跟随背景图片一致?? 内容用的绝对定位,写死不行,百分比也不对,要怎么写呢,求指点,谢谢 外部...
  • css控制背景图片位置-background-position

    千次阅读 2016-04-30 18:52:48
    主要来介绍一下背景background的几个属性。 我们给一个div加上背景后,先仅仅控制背景图片的路径,其他的都不做控制。这时候背景图片的坐标是左上角,如果图片大小大于div的大小,多出来的部分会被切掉,如果图
  • background-position的向右对齐用法

    千次阅读 2017-11-13 10:31:00
    background-position: right 7px center; right:就是你要偏移的方向 7px:就是要偏移的位置 center就是之前的左右位置 如果有更好的实现办法欢迎补充告知 转载于:...
  • 如何解决单独设置background-xxx属性失效问题 background属性是一个使用很广泛的属性,所有主要浏览器都支持这一属性,平日里我们也常用background: #FF0000 url('../xx.jpg') top left no-repeat; 这一缩写...
  • background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 248,310
精华内容 99,324
关键字:

cssbackground-position