• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • background-position

    background-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

    示例

    /* keyword values */
    background-position: top;
    background-position: bottom;
    background-position: left;
    background-position: right;
    background-position: center;
    
    /* <percentage> values */
    background-position: 25% 75%;
    
    /* <length> values */
    background-position: 0 0;
    background-position: 1cm 2cm;
    background-position: 10ch 8em;
    
    /* multiple images */
    background-position: 0 0, center;
    
    /* edge offsets values */
    background-position: bottom 10px right 20px;
    background-position: right 3em bottom 10px;
    background-position: bottom 10px right;
    background-position: top right 10px;
    
    /* global values */
    background-position: inherit;
    background-position: initial;
    background-position: unset; 
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持background-position

    语法:

    background-position:left | center | right | top | bottom |<length>| <percentage>
    • 关键字 center,用来居中背景图片。
    • 关键字 top, left, bottom, right 中的一个。用来指定把这个项目(原文为 item)放在哪一个边缘。另一个维度被设置成 50%,所以这个项目(原文为 item)被放在指定边缘的中间位置。
    • <length><percentage>。指定相对于左边缘的 x 坐标,y 坐标被设置成 50%。
    • 如果一个值是 top 或 bottom,那么另一个值不应该是 top 或 bottom。
    • 如果一个值是 left 或 right,那么另一个值不应该是 left 或 right 。
    • +50px(将图片的左边界对齐容器的中线)
    • 0px(图片的左边界与容器左边界重合)
    • -100px(将图片相对容器左移100px,这意味着图片中部的100px内容将出现在容器中)
    • -200px(将图片相对容器左移200px,这意味着图片右部分的100px内容将出现在容器中)
    • -250px(将图片相对容器左移250px,这意味着图片的右边界对齐容器的中线)

    另外需要注意,如果背景图片的大小和容器一样,那设置百分比的值将永远无效,因为“容器和图片的差”为0(图片永远填满容器,并且图片的相对位置和容器的相对位置永远重合)。在这种情况下,需要为偏移使用绝对值(例如px)。

    • <position>一个<position>定义一组 x/y 坐标(相对于一个元素盒子模型的边缘),来放置这个项目(原文为 item)。它可以被定义为一个值或者两个值。如果被定义为两个值,那么第一个值代表水平位置,第二个代表垂直垂直位置。如果只指定一个值,那么第二个值默认为center
    • 一个值的语法:这个值可以是:
    • 两个值的语法:一个定义 x 坐标,另一个定义 y 坐标。每个值可以是:


      注意:

    • 也就是说,top topleft left是无效的。
    • 至于百分比:

    • 百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界(或上边界)和容器的左边界(上边界)重合。值100%代表图片的右边界(或下边界)和容器的右边界(或下边界)重合。值50%则代表图片的中点和容器的中点重合。

      当指定百分比值的时候,实际上执行了以下的计算公式(该公式可以用数学方式定义图片和容器相对位置重合):

      (container width - image width)*(position x%)=(x offset value)
      (container height - image height)*(position y%)=(y offset value)


      使用X坐标来举个例子,假设有一个300px宽的图片,将这个图片使用到一个100px宽的容器中,并且将background-size设置成自动:

      100px - 300px =-200px(容器和图片的宽度差)

      当对background-position设置值依次为-25%,0%,50%,100%,125%,得到图片相对容器的偏移值为:

      -200px *-25%= 50px
      -200px * 0%= 0px
      -200px * 50%=-100px
      -200px * 100%=-200px
      -200px * 125%=-250px


      对于这些例子中设置的偏移,图片相对容器真实的偏移值就是:

    例子

    下面三个例子使用background来创建一个包含一个星星的黄色长方形元素。每个例子中,星星的位置是不一样的。第三个例子阐明了如何

    为两个不同的背景图片指定位置。

    HTML 内容

    <div class="exampleone">example one</div>
    <div class="exampletwo">example two</div>
    <div class="examplethree">example three</div>

    CSS 内容

    /* 被所有 div 共享 */
    div {
        background-color: #ffee99;
        background-repeat: no-repeat;
        width: 300px;
        height: 80px;
        margin-bottom: 12px;
    }
    
    
    /* 这些例子使用 `background` 缩写 */
    .exampleone {
        background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #ffee99 2.5cm bottom no-repeat;
    }
    .exampletwo {
        background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #ffee99 3em 50% no-repeat;
    }
    
    /*
    多背景图片:每个图片依次和相应的 `background-position` 匹配
    */
    .examplethree {
        background-image:    url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"), 
                             url("https://mdn.mozillademos.org/files/7693/catfront.png");
        background-position: 0px 0px,
                             center;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    	width:350px;
    	height:200px;
    	border:1px solid #ccc;
    	background-origin:content-box;
    	background-image:url("images/鸟.png");
    	background-repeat:no-repeat;
    background-position:right;
    	padding:30px;
    }
    </style>
    </head>
    
    <body>
    <p>html中文网html中文网html中文网html中文网html中文网html中文网html中文网html中文网html中文网html</p>
    </body>
    </html>

    效果图: