Question

我遇到了CSS border-image属性的一些问题。 CSS如下：

    footer#footer {
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-moz-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-webkit-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
border-image-width: 100% 0 0 0;
-moz-border-image-width: 100% 0 0 0;
-webkit-border-image-width: 100% 0 0 0;
}

我在页脚本身有一个图像，这似乎覆盖了为边框设置的区域。

我尝试将此网站应用于以下网站：http://bramcroft.co.uk/

我想要棕色页脚上方的边框。

非常感谢任何帮助！

Answer 1

您需要在css图像路径文件中添加双引号"...."。

改变这个：

border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

-moz-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

-webkit-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);

到此：

border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png");

Answer 2

您可以通过更改所需的边框尺寸来尝试此操作

border:10px;
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;

CSS border-image属性未显示

2 个答案: