在 div 中设置背景图像，位置选项
我知道如何在 div 中设置背景，例如：
background: url(/images/image.gif) no-repeat top right;
有时我需要更细粒度的控制，而不是顶部、中心或底部。
我看到有人在位置部分使用“em”，那是做什么的？
I know how to set a background in a div like:
background: url(/images/image.gif) no-repeat top right;
Sometimes I need more fine grained control, other than say top, center or bottom.
I have seen people using 'em' in the position section, what is that doing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
请参阅 MDN 参考以了解
background-position. 除了一般术语之外，您还可以使用百分比或其他 CSS 测量单位来设置 x 或 y 偏移。em是指当前元素的字体大小的单位，但您也可以使用px表示像素偏移。See the MDN reference for
background-position. Instead of general terms, you can also use percentages or other CSS units of measurement to set an x- or y-offset.emis a unit that refers to the font size for the current element, but you can also usepxfor pixel offset.请记住，em 是相对尺寸 - 因此 1em 是相对于我的容器的尺寸，而不是实际尺寸。 A 1，是基于我的浏览器默认值的 1em。
因此，具有 1em 的父类（例如 .parent）和具有 0.75em 的子类将是父类的 0.75。具有 0.5em 的父代的孙子将是 0.75 的 0.5em，或者原始 1em 的大约 0.375，而不是原始 1em 的 0.5。
我不使用 .px - 它更容易开始，但是当您需要更改所有内容时，您需要在所有地方更改它 - 因此，如果您将 1em 更改为 1.25em，它也会更改嵌套在其中的子级和孙级。
举个具体的例子，如果我设置 margin-top: 0.5em;在 CSS 中，我是说将当前字体高度的一半作为上边距。
.px - 根据显示器设置而变化的像素，其起源于屏幕分辨率。
.pt - 是点，这意味着在打印页面上，72 点约为 1 英寸 - 它起源于印刷材料。
% 起源于百分比，我发现长期管理更困难。
em 起源于标记。
大多数浏览器都以 12pt（点）字体为基础（如果我没记错的话），即 1em，这确实是一个未知的像素数。所以，如果我记得 0.625em 大约是 10pt，那么如果我将主体设置为 0.625em，那么我下面的 0.5em 大小就是 5 磅，主体下面 2em 的大小就是 20 磅，依此类推。
编辑：我的数学在一天结束时被咬了:) 所以 10/12 是 0.8333 - 所以我们需要 0.8333 而不是 0.625，但你明白了。
Keep in mind the em is a RELATIVE size - so a 1em is a relative to my container and NOT actual size. A 1, is a 1em based on my browsers default.
So a parent (say .parent) class with a 1em and a child with a 0.75em would be .75 of the parent. A grandchild of that parent with 0.5em would be 0.5em of the 0.75, or approx 0.375 of the original 1em and not 0.5 of that original.
I don't use .px - it is easier to start, but when you need to change everything, you need to change it everywhere - so if you change the 1em to a 1.25em, it also changes the child and grandchild nested within those.
for a concrete example, if I put a margin-top: 0.5em; in a CSS, I am saying to put half the height of my current font as the top margin.
.px - pixels which change depending on the monitor setting and has origins in screen resolution.
.pt - is point, which means that on a printed page, 72 point is approx 1 inch - it has origins in printed material.
% has origins in well, percentage, and I find it more difficult to manage long term.
em has origins in markup.
Most browsers have 12pt (point) font as the base (if I remember correctly), which is 1em, which is - an unknown number of pixels really. SO, off the cuff if I remember .625em is approx 10pt, so if I set the body to .625em, then my .5em below that is 5 point in size, 2em below the body would be 20 point and so forth.
EDIT: my math bites at the end of the day :) so 10/12 is .8333 - so we need .8333 not .625, but you get the idea.
渐变可以通过控制
或
您可以切片 1px 高度或 1px 宽度（渐变图像）并在背景中水平或垂直重复它...
希望这有帮助
Gradients can be controlled by
or
You can slice 1px height or 1px width (Gradient image) and repeat it in the background horizontally or vertically...
hope this helps