Question

我已经获得了一个设计，其中包含页面的标题，以使body的整个宽度具有彩色背景，但是在h1和导航选项之间具有透明边框报头中。

我做了jsfiddle for it here。如果您想象标题左侧和右侧的空格与标题中间的绿色相同，但您仍然可以在导航选项之间看到下面的页面，那么这就是我想要实现的目标。

这是一种不同寻常的风格，我之前从未遇到过这种情况，这就是我为什么会挣扎的原因。

我可以在页面加载时使用JS来解决这个问题，但是如果可能的话我想要一个纯CSS解决方案。如果有人有任何想法，那就太好了！

Answer 1

您可以使用CSS border-image属性。

像这样的东西，但只是为了正确的边界你可以使用透明的png文件：

.menu li{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

显然在IE中不起作用..

这是w3schools页面的链接： http://www.w3schools.com/cssref/css3_pr_border-image.asp

页眉标题全宽，背景颜色...但标题中的元素之间有透明的部分

1 个答案: