我想以div的右上角的方式为div设置背景图像，但与顶部和右侧之间的距离为固定的" 10px"。

如果需要在div的左上角中，我将按照以下方法进行操作：

background: url(images/img06.gif) no-repeat 10px 10px;

无论如何，可以获得相同的结果，但在右上方显示背景吗？

解决方案

我不知道纯CSS是否可行，所以我们可以尝试

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

并修改图片，使其在顶部和右侧以透明颜色合并10px边框

有几种方法可以做到这一点。

• 如果可能的话，自己动手做数学。我们已经知道图像的尺寸。如果我们知道div的尺寸，则只需将图像放在(div宽度-图像宽度-10，div高度-图像高度-10)。
• 使用Javascript为我们完成繁重的工作。除了不需要知道div本身的尺寸外，其他方法几乎与上述方法相同。 Javascript可以告诉我们。
• 一种更骇人听闻的方法是在图片的顶部和右侧放置一个10px的透明边框，并将位置设置为"右上方"。

一种解决方案是绝对定位一个空的" div"，并​​指定背景。我不相信有一种方法可以完全通过CSS来实现，不对图像进行任何更改，并且在流畅的布局中没有额外的标记。

使用前面提到的规则以及顶部和右侧边距：

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

背景图像仅出现在填充内，而不出现在边距内。如果不能选择增加边距，则我们可能不得不求助于另一个div，尽管我建议我们仅将其用作最后的尝试，以保持标记尽可能的精简和具体。

我们可以使用百分比：

background: url(...) top 98% no-repeat;

如果我们知道父div的宽度，则应该很容易确定需要使用的百分比。