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;

CSS 边框图像属性未显示

CSS border-image property not showing

html

css

border

border-image

CSS 边框图像 属性 未显示

CSS border-image property not showing

html

css

border

border-image

CSS 边框图像属性未显示