0

我进行了彻底的搜索,但找不到特定查询的答案......当然这可能是由于我的新手能力和有缺陷的思维。我想要完成的是两行 3 个非平铺、非重复、并排的图像......设置为我的网页背景。

这是我想复制为 CSS 背景的基本 HTML 格式:

<HTML>
<span><img src="images/image1.gif"><img src="images/image2.gif"><img src="images/image3.gif"><BR><img src="images/image4.gif"><img src="images/image5.gif"><img src="images/image6.gif"></span>
<HTML>

这是我对 CSS 解决方案的粗略尝试:

<style type="text/css"> 
body
{ background-image: url('images/image1.gif'), url('images/image2.gif'), url('images/image3.gif'), url('images/image4.gif'), url('images/image5.gif'), url('images/image6.gif'); background-repeat: no-repeat; }
</style>

虽然这确实“有效”......我所做的只是在左上角将 6 张图像直接堆叠在一起。对新手的任何帮助将不胜感激。

谢谢!

4

1 回答 1

1

您需要background-position明确分配给每个背景图像。这应该适用于您的情况:

background-position: top left, top center, top right, bottom left, bottom center, bottom right;

还可以查看background-sizecss 属性。

工作小提琴

于 2013-03-06T08:41:59.103 回答