markdown 关于背景的位置属性使用百分比时的定位情况

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 关于背景的位置属性使用百分比时的定位情况相关的知识,希望对你有一定的参考价值。

# Background Position Percentage

When writing css, you may find that when set the value of the `background-position` using percentage value,it may look different from what you position a picture using `left` or `top`.You can find an example [here](https://css-tricks.com/i-like-how-percentage-background-position-works/).

If we are setting a sprite picture as backgroud, we may style like below:

``` css
div {
    overflow: hidden,
    background: url(some.pic) center 50% no-repeat
}
```

Then `div` will show the middle of `some.pic`, not set the middle of `some.pic` as its top. We can guess how to calculate that:

``` math
top = percent * (div_height - pic_height)
```

What I talk about above is a problem may encounter when use sprite.

Assuming that sprite is vertical, seprated as `n` part, we want to show the `m`th(start from 0) part of it, with its heght is height of contaner, width auto. Our css may like below:

``` css
div {
    overflow: hidden,
    background: url(some.pic) center (100*(m/n-1))%/auto (100*n)% no-repeat
}
```

以上是关于markdown 关于背景的位置属性使用百分比时的定位情况的主要内容,如果未能解决你的问题,请参考以下文章

简抄h5 新增的几个背景属性和文本属性

属性设置百分比时的计算参考汇总

背景位置百分比不起作用[重复]

CSS background-size 属性详解

CSS3:background-size背景图片尺寸属性

使用 dompdf 生成 pdf 时的背景位置数组