html - 页眉全宽与背景颜色...但在页眉元素之间有透明部分

Question

我得到了一个设计，它需要一个页面的标题，使其具有全宽的彩色背景，但在标题中的 和 nav 选项body之间具有透明边框。h1

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

这是一种不寻常的风格，我以前从未遇到过，这就是我挣扎的原因。

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

Answer 1

您可以使用 CSS 边框图像属性。

像这样的东西，但只是为了正确的边框，你可以使用透明的 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