CSS背景图片？

Question

我有一个200px乘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并启用透明度。

把那个坏家伙扔到后台-image=url(“example.com/img.png”)；

你应该是金子。