在DIV设置背景图片，位置选择

问题描述：

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

有时候，我需要更为精细的控制，不如说是顶部，中部或底部等。

我已经看到人们在位置部分使用'em'，那是干什么的？

答

See the MDN reference for background-position.您也可以使用百分比或其他CSS测量单位设置x或y偏移来代替一般术语。 em是指当前元素的字体大小的单位，但您也可以使用px作为像素偏移量。

现在是一个断开的链接。 – Kzqai 2013-06-17 23:09:50

@Kzqai：很好！无论如何，更新指向MDN是因为它更彻底。为了将来的参考，这是为什么我们允许社区编辑的一个很好的例子：当你看到一个断开的链接，而不是期望作者保持他们3岁的答案更新（不幸的是，网络比我们更脆弱'喜欢），请随时自行更新链接。毕竟，投票是我们质量控制工具箱中的辅助工具;它的作用就是使这种资源最好地发挥作用，编辑是这里更有效率的工具。 – Matchu 2013-06-18 00:19:42

我可能已经这样做了，但我不打算修复一个破损的w3schools链接。 http://w3fools.com – Kzqai 2013-06-18 11:42:19

答

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

所以父母（说.parent）与1em和0.75em的孩子将是父母的.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英寸 - 它来自印刷材料。％有良好的起源，百分比，我发现长期管理更加困难。他们有标记的起源。

大多数浏览器都有12pt（点）字体作为基础（如果我没有记错的话），它是1em，它实际上是未知数量的像素。所以，如果我记得.625em大概是10点，那么如果我将身体设置为.625em，那么我的.5em在5点以下，身体下面的2em将是20点，等等。

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

答

梯度可以通过

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

或

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

来控制你可以切片1px的高度或宽度1px的（梯度图像）和在背景水平或垂直重复它...

希望这可以帮助

在DIV设置背景图片，位置选择

相关推荐