精华内容
下载资源
问答
  • background-position属性

    2016-10-07 20:55:28
    background-position属性 css 属性: background-position: x y; x、y值可以是left right top bottom center,可以是相对值%,可以是数字。  1、x作用于横轴,y是竖轴  2、当取英文关键字时,left 相当于 ...
    background-position属性

    css 属性:

    background-position: x y;

    x、y值可以是left right top bottom center,可以是相对值%,可以是数字。 

    1、x作用于横轴,y是竖轴

            2、当取英文关键字时,left 相当于 x:0%,center为50%具体看它放在x还是y处。

    注:无论left在x或者y的位置,它都会将x变成0%;

            3、xy取数字,就是图片左上角与元素的左上角的位置偏移。取负数,则向上向左偏移。

            4、xy取%,如10% 20%,图片的(10%*宽,20%*高)坐标对应元素的(10%*宽,20%*高)坐标,两个坐标重合就是图片的位置。如果取负数则是元素的左上角与图片(10%*宽,20%*高)坐标重合。


    展开全文
  • background-size background-position 属性

    background-size background-position 属性

    从一个c#程序猿转做前端程序猿以来,很少写css,总是在别人的基础上修改,导致css偏科太严重了。所以这里开始记录每一个自己不熟悉的css属性。

    今天做一个div添加背景图片的工作,结果不知道怎么将图片缩放

    background-size 属性,规定背景图像的尺寸

    属性 描述
    length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
    percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
    cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    background-position 属性,如何定位背景图像
    这里写图片描述

    展开全文
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景...通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:background-position: xpos ypo...

    除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景定位技术,能够精确控制背景在对象中的位置。

    默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的,但设计师往往希望背景能够出现在任何位置。通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:

    1. background-position: xpos ypos | x% y% | x y

    CSS1中,background-position属性需要 2 个参数值,第一个值用于横坐标,第二个值用于纵坐标,默认值为 0% 0%,即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值,则用于 x 轴方向,y 轴方向使用默认值 center,即垂直居中。

    上述语法格式表明,背景图像有 3 种定位方式:

    1)xpos ypos:表示使用预定义关键字定位,水平方向可选关键字有 left | center | right,垂直方向可选关键字有 top | center | bottom。

    关键字定位,应用的是对齐规则,而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐,为 right 表示图像的右边和对象的右边对齐;ypos 为 top 表示图像的顶部和对象的顶部对齐,为 bottom 表示图像的底部和对象的底部对齐;xpos、ypos等于 center表示图像在水平和垂直方向的中心,和对象在水平和垂直方向的中心对齐,即。

    依然使用前面的背景图案 bg.gif,其尺寸为 100px * 100px,对象的尺寸为 200px * 200px,背景图像的位置使用预定义关键字定位。如:

    1. div {
    2. width: 200px;
    3. height: 200px;
    4. border: 1px dashed #ccc;
    5. background-repeat: no-repeat;
    6. background-position: center center;
    7. background-image: url(img/bg.gif);
    8. }

    上述定位,就表示背景图像的中心,与背景区域的中心对齐,即背景图像位于对象的中央位置。运行结果如图 4‑28 所示:

    背景图像关键字定位图4-28 背景图像关键字定位

    2)x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为:

    x = (对象的宽度 - 图像的宽度) * x%;

    y = (对象的高度 - 图像的高度) * y%;

    还是上面的例子,改为百分比定位,要使背景图像居中,只需把背景图像的位置设置为50% 50% 即可。使用上面的公式,得到背景图像起始位置的坐标为:

    x:(200px - 100px) * 50%  = 100px * 50% = 50px

    y:(200px - 100px) * 50%  = 100px * 50% = 50px

    得到的结果与上例相同,限于篇幅,就不再截图了。当然,百分比的值也可以是负值,计算公式依然不变。还是上面的例子,把百分比改为 -50% -50%。此时,得到背景图像起始位置的坐标为:

    x:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

    y:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

    运行结果如图 4‑29 所示:

    背景图像百分比定位图4-29 背景图像百分比定位

    从上图可以看出,此时的背景图像只显示了原本图像的 1/4,这是因为背景图像的起始位置向左、向上移动后,只有1/4 的图案落到了背景区域。由于背景被设置为不重复,所以,就只显示了原本图像的 1/4。

    3)x y:表示使用长度值定位,是将背景图像的左上角,放置在对象的背景区域中(x, y)所指定的位置,即 x, y 定义的是背景图像的左上角,相对于背景区域左上角的偏移量。

    偏移量长度可以是正值,也可以是负值。x 为正值表示向右偏移,负值表示向左偏移;y 为正值表示向下偏移,负值表示向上偏移。背景图像发生移动后,就有可能超出对象的背景区域。此时,超出的部分将不会显示,只会显示落入背景区域的部分。

    如果把上面的例子改为长度值定位,要使背景图像居中,只需把背景图像的位置设置为50px 50px 即可。它就表示背景图像的左上角顶点,相对于对象背景区域的左上角顶点在 x轴右移 50px,在 y 轴下移 50px。得到的结果依然是背景图像位于对象的中央。

    在CSS3中,background-position属性支持 4 个参数值,前两个值用于横坐标,后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位,而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

    如果只提供一个值,则第二个值为center。如果提供两个值,第一个长度或百分比表示水平偏移,第二个长度或百分比表示垂直偏移。长度或百分比,表示背景图像的左上角相对于背景位置区域左上角的偏移。如,下面几个声明给出了背景的起点相对于背景区域左上角的偏移:

    1. background-position: left 10px top 15px; /* 10px, 15px */
    2. background-position: left top ; /* 0px, 0px */
    3. background-position: 10px 15px; /* 10px, 15px */
    4. background-position: left 15px; /* 0px, 15px */
    5. background-position: 10px top ; /* 10px, 0px */
    6. background-position: left top 15px; /* 0px, 15px */
    7. background-position: left 10px top ; /* 10px, 0px */

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • background-position 属性设置背景图像的起始位置。 语法: background-position : length || lengthbackground-position : position || position 取值:length :百分数 | 由浮点数字和单位标识符组成的长度值...

    background-position 属性设置背景图像的起始位置。

    语法:

    background-position : length || length 
    background-position : position || position 

    取值: 
    length  :百分数 | 由浮点数字和单位标识符组成的长度值
    position  : top | center | bottom | left | center | right 

    1、background-position没有设置时,默认是background-position:0 0:

    该效果background-position:left top;和background-position:0% 0%;是一致的

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width:400px;
                height:300px;
                background:transparent url(images/img5.jpg) no-repeat;
                border:5px solid green;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

      图片如下:

    2、background-position设置具体值,第一个值表示x轴移动量,第二个值表示y轴移动量:

    div{
                width:400px;
                height:300px;
                background:transparent url(images/img5.jpg) no-repeat;
                border:5px solid green;
                background-position:70px 40px;//图片向右移动70px,向下移动了40px,如果图片要向左或者向上,可以设负值background-position:-70px -40px 
    }

      如图:

    3.background-position:center center或者background-position:50% 50%;设置背景居中

    div{
                width:400px;
                height:300px;
                background:transparent url(images/img5.jpg) no-repeat;
                border:5px solid green;
                /*background-position:center center;*/
                background-position:50% 50%;
            }
    

    如图:  

     

    转载于:https://www.cnblogs.com/yttbbd/p/4842939.html

    展开全文
  • 一、坐标系及原点就像CSS的position属性是定位元素一样,background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片(注意,这里并不是定位由background-color定义的背景颜色)...
  • background-position 属性 原文链接: CSS background-position 属性 实例 如何定位背景图像 body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background...
  • background-position属性

    2021-01-31 20:10:14
    background-position 可能的属性值top center bottom left right background-size
  • 记录一次奇葩的问题:background-position属性值无效记录一次奇葩的问题:background-position属性值无效原来的写法新的写法 记录一次奇葩的问题:background-position属性值无效 先描述一下当时的情况,我使用的...
  • 以下主要说明以下background-position属性的应用。 一般在设置background属性时的写法是:  background:url("path") x y no-repeat; 注意:x y 就是代表了background-position属性,该属性必须在no-repeat的情况...
  • background-position属性如何定位背景图像:body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}x% y% 第一个值是水平位置,第二个...
  • web——CSS精灵图(背景图、定位背景图片background-position 属性)一、background-position属性二、实例 一、background-position属性 例如下图,若我们只需显示其中一部分 我们可以设置一个div,并设置如下两个...
  • 1、background-position: x y ; background-position:100px 30x; 表示距离左边100像素,距离上边30像素 background-position:50% 10%; 在X轴居中,距离上方10%的距离 background-position:left top;左上(X轴的值...
  • 批量输出 CSS background-position 属性的定位像素值
  • 在网页开发中,我们经常看到有人使用css background-position属性来做切图,为什么要使用cssSprite切图技术呢?css Sprite切图技术主要就是将多张图片放在一张图片里面,这有助于减少http网页请求,并且提高网页的...
  • css样式中有个background-position背景属性,是关于对背景在对象中的精准定位。 1. background-position: 水平方位 垂直方位(right left top bottom center) 2. background-position-x: 水平方向移动 3. ...
  • 复制代码代码如下: .nav { background:transparent url(images/y.gif) no-repeat scroll 0 0; height:42px; width:980px; font-size:12px; list-style:none; } .nav ul{ padding-left:4px; } .nav li{position:...
  • 最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
  • background-position: center center; background-image: url(img/bg.gif); } x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标...
  • jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position。 谷歌支持 background-position-x; background-position-y ;firefox不支持。 使用 background...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,316
精华内容 926
关键字:

background-position属性