1

我是设计师的初学者，我必须开发一个小型网站，在那里我设计了一个 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，它没有工作？

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

4

5 回答 5

4

只需将图像添加到您的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/

于 2013-04-09T17:15:16.043 回答
1

background-color不能指定网址，只能指定颜色。您将需要使用多个div（或您正在使用的任何元素）来做您想做的事情。

于 2013-04-09T17:07:07.040 回答
1

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

background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
于 2013-04-09T17:11:52.497 回答
0

只要我知道background-color不接受图像文件。试试background-color:#4B4C4D吧。要选择 HTML 颜色，您可以使用此在线颜色选择器。

编辑：将 adiv放在另一个内部div并赋予这些div不同的background-image值。一个 div 只能有一个背景图像。

但是在 CSS3 中，您可以拥有多个背景图像。为此目的访问此链接。

于 2013-04-09T17:08:02.147 回答
0

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

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

http://jsfiddle.net/YhZ8e/

于 2013-04-09T17:11:17.153 回答