css - 如何在 CSS 中做到这一点？一个元素上的透明背景在另一个具有背景的元素内

Question

这可能吗？我的 CSS 还不错，但我不能不听。我想在标题后面使用背景图像，但我希望标题“淘汰”背景图像，将背景留在两侧。我希望这是有道理的。

我做了一个小提琴，以防有人想要狂欢……谢谢！

http://jsfiddle.net/CnVBU/

Answer 1

最简单的方法是使用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）。

Answer 2

那么它现在是透明的。听起来您想要的是将与其他颜色（主体背景颜色？）匹配的背景颜色应用于 h1。像这样的东西：

http://jsfiddle.net/CnVBU/1/

显然，使用您想要的任何背景颜色并添加边距/填充等，为您提供适当的“敲除”尺寸。

Answer 3

我已经更新了你的 jsFiddle：

http://jsfiddle.net/CnVBU/2/

现在您在 h1 上获得了透明背景。

我使用 rgba 颜色模型：红色（范围：0-255）绿色（0-255）蓝色（0-255）阿尔法（0-1）。如果您想要 50% 的透明度，请使用 0.5 alfa。

这适用于所有常见的浏览器（大多数 IE 需要过滤器/破解）