Home  >  Q&A  >  body text

css - 关于background-position百分比的问题?

dome在这 https://jsfiddle.net/d1LpL9eu/

background-position: calc(100% - 40px) calc(100% - 20px);

background-position前两个值应该是
水平和垂直位置,分别是从左边和上边开始计算的,
为什么calc(100% - 40px)是从右侧开始计算的?
calc中的100%指的是图片还是容器呢?

高洛峰高洛峰2761 days ago946

reply all(3)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:33:44

    calc(100% - 40px)
    Align the right side of the background image with the right inner border of the container, and then move it 40 pixels to the right
    calc(100% - 20px);
    Align the bottom edge of the background image with the lower inner border of the container Align, then move up another 20 pixels

    Background-position is valid for both the container and the background when using percentages. The horizontal direction is calculated from the left and the vertical direction is calculated from the top.
    That is, background-position:50% 50% will take 50% of the horizontal direction of the container. Align the position with 50% of the background image, and at the same time align the 50% position in the vertical direction with the 50% position of the background image. The effect is that the background image is placed in the middle of the container

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:33:44

    1,

    .box {
        background-position: calc(100%) calc(100%);
    }

    Calculated, it’s in the lower right corner, so it’s clear at a glance~ The rest will be fine~

    2. The 100% in calc here refers to

    .box {
        background-position: calc(x) calc(y);
    }

    Do you know?

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:33:44

    Calc is the abbreviation of the English word calculate. It is a new function of CSS3, which is used to specify the length of the element (obtaining the result value through calculation). And x direction: calc(100% - 40px) means the total width - 40px, of which 100% is the total width (total height) of the container.

    reply
    0
  • Cancelreply