Question

我是设计师的初学者，我不得不开发一个小网站，我设计了一个ui，但我对css有疑问。

这是我写的一种风格

background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png");
background-position: bottom left, bottom right, top left, top right;
background-color:grey;
background-repeat: no-repeat;

将四个图像插入四个角落，并用灰色背景填充所有其他部分

现在，我想插入一张图片，而不是灰色，所以我用background-color替换background-image: url("../images/bg_content.png")，但它对我没有帮助。我尝试使用第一个bg_content.png中的background-image并将其对应的位置写入center，但它不起作用？

你们中的任何人都可以帮助我！

Answer 1

只需将图片添加到background-image和background-position，然后展开background-repeat：

background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png"), url("../images/bg_content.png");
background-position: bottom left, bottom right, top left, top right, top left;
background-color:grey;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;

http://jsfiddle.net/5k8eg/2/

Answer 2

background-color无法指定网址，只能指定一种颜色。您将需要使用多个div（或您正在使用的任何元素）来执行您要执行的操作。

Answer 3

这可能是因为你的背景图像没有重复（角落图像也是如此）因此，它会被其中一个角落图片掩盖。尝试将第一个背景图像设置为重复：

background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;

Answer 4

只要我知道background-color不接受图片文件。请尝试使用background-color:#4B4C4D。要获取HTML颜色，您可以使用this online color picker。

编辑：将div置于另一个div内，并为这些div提供不同的background-image值。一个div只能有一个背景图像。

然而，在CSS3中，您可以拥有多个背景图像。为此目的访问this link。

Answer 5

您确定为第5张图片的X和Y指定了中心吗？

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

http://jsfiddle.net/YhZ8e/

相似的代码，不同的效果

5 个答案: