CSS背景图片？

Question

我有一个200px x 200px的div。

如果我想将30x30px无重复的背景图像放置在左上角120px和顶部50px的左上角位置...，同时还允许该div中的文本显示在背景图像的顶部..我该怎么办？

我尝试了以下操作，但似乎没有用。

background:url(http://example.com/background-image.png) no-repeat 120px 50px;

任何想法如何执行我想完成的工作？

Answer 1

确切的问题是什么？ 图像根本没有出现吗？ 还是位于其他位置？ CSS没有问题。 检查图像是否正在加载。 为此，您可以删除一次位置，然后检查图像是否加载。

Answer 2

这可能会给您一些帮助。 除此之外，如果我能看到发生了什么，调试起来会容易得多。 也许图像路径不正确，某个其他实体遮挡了该框，div自身崩溃了（背景图像不在框模型中流动）或另一条CSS规则覆盖了您指定的那个。

<div style="width: 200px; height: 200px; font-size: 2em;
background: url(http://sstatic.net/so/img/logo.png)
no-repeat 120px 50px; border: 1px solid #f00;">
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

Answer 3

在您选择的图像编辑软件中打开图像。

使画布大小为150px x 80px。

将图像放在右下角。 其余部分保持透明（图像后无背景）。

另存为.png或.gif，透明度打开。

把那个坏家伙扔到background-image = url（“ example.com/img.png”）;

你应该是金。