这可能吗?我的 CSS 还不错,但我不能不听。我想在标题后面使用背景图像,但我希望标题“淘汰”背景图像,将背景留在两侧。我希望这是有道理的。
我做了一个小提琴,以防有人想要狂欢……谢谢!
这可能吗?我的 CSS 还不错,但我不能不听。我想在标题后面使用背景图像,但我希望标题“淘汰”背景图像,将背景留在两侧。我希望这是有道理的。
我做了一个小提琴,以防有人想要狂欢……谢谢!
最简单的方法是使用border-image
. 在此处查看您更新的小提琴。
这是它的CSS(多个浏览器):
.container {
border-width: 20px;
-moz-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
-webkit-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
text-align:center;
}
我使用Border-Image.com生成了此代码(因为自己编写此代码令人困惑:P)。
那么它现在是透明的。听起来您想要的是将与其他颜色(主体背景颜色?)匹配的背景颜色应用于 h1。像这样的东西:
显然,使用您想要的任何背景颜色并添加边距/填充等,为您提供适当的“敲除”尺寸。
我已经更新了你的 jsFiddle:
现在您在 h1 上获得了透明背景。
我使用 rgba 颜色模型:红色(范围:0-255)绿色(0-255)蓝色(0-255)阿尔法(0-1)。如果您想要 50% 的透明度,请使用 0.5 alfa。
这适用于所有常见的浏览器(大多数 IE 需要过滤器/破解)