Question

这可能吗？我的CSS还不错，但我不能无法听到这个。我想在标题后面使用背景图像，但我希望标题“敲出”背景图像，将背景留在任何一侧。我希望这是有道理的。

我已经做了一个小提琴，任何人都希望有一个bash ...谢谢！

Answer 1

最简单的方法是使用border-image。查看更新后的小提琴here。

这是它的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都需要过滤/破解）

我怎么能在CSS中这样做？在一个元素的透明背景在另一个元素里面有背景

3 个答案: