html - CSS边框图像属性未显示

Question

我对 CSS 边框图像属性有一些问题。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;