2

我知道如何在 div 中设置背景，例如：

background: url(/images/image.gif) no-repeat top right;

有时我需要更细粒度的控制，而不是说顶部、中心或底部。

我看到有人在位置部分使用“em”，这是在做什么？

4

3 回答 3

4

请参阅 MDN 参考以获取background-position. 除了通用术语，您还可以使用百分比或其他 CSS 测量单位来设置 x 或 y 偏移。em是指当前元素的字体大小的单位，但也可以px用于像素偏移。

于 2010-02-26T22:26:45.873 回答
1

请记住，em 是相对大小 - 所以 1em 是相对于我的容器而不是实际大小。A 1，是基于我的浏览器默认值的 1em。

因此，具有 1em 的父类（例如 .parent）和具有 0.75em 的子类将是父类的 0.75。具有 0.5em 的该父母的孙子将是 0.75 的 0.5em，或原始 1em 的大约 0.375，而不是原始的 0.5。

我不使用 .px - 它更容易开始，但是当您需要更改所有内容时，您需要在任何地方更改它 - 因此，如果您将 1em 更改为 1.25em，它也会更改嵌套在其中的子孙.

举个具体的例子，如果我放一个 margin-top: 0.5em; 在 CSS 中，我是说将当前字体高度的一半作为上边距。

.px - 根据显示器设置而变化的像素，起源于屏幕分辨率。.pt - 是点，这意味着在打印页面上，72 点大约是 1 英寸 - 它起源于印刷材料。% 源于井、百分比，我发现长期管理更困难。em 起源于标记。

大多数浏览器都以 12pt（点）字体为基础（如果我没记错的话），即 1em，这实际上是未知数量的像素。所以，如果我记得 0.625em 大约是 10pt，那么如果我将 body 设置为 0.625em，那么我的 0.5em 下面是 5 点，身体下面 2em 是 20 点，依此类推。

编辑：我的数学在一天结束时咬了:) 所以 10/12 是 .8333 - 所以我们需要 .8333 而不是 .625，但你明白了。

于 2010-02-26T22:56:05.920 回答
1

梯度可以通过

background:#fff url(images/vertical_sliced_image.gif) repeat-y;

或者

background:#fff url(images/horizontal_sliced_image.gif) repeat-x;

您可以切片 1px 高度或 1px 宽度（渐变图像）并在背景中水平或垂直重复它...

希望这可以帮助

于 2010-08-28T23:13:48.763 回答