覆盖背景颜色

Question

我对CSS有疑问。

我有2个div，一个有background-color: #000;，第二个有透明png文件，部分没有背景（透明），我们称之为background-image: url(images/scrolltotop.png);。

我想要的是用png文件中的透明度覆盖background-color，因此背景不会覆盖我的png文件。我会给你的图片说明我的意思：

现在带有我想得到的结果的图像（上图） - 来自html风格的背景。

有没有办法用透明度来覆盖背景色？

编辑：也许这个img会告诉你更多，我想做什么（上图）

Answer 1

background-color: transparent;

你试过吗？

修改

http://jsfiddle.net/FCXGu/3/

border-width: 20px;
border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-moz-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-webkit-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;

需要一点时间才能理解这是如何工作的。图像的边界基本上像“填充”一样，因为它通常比正常厚。你可以认为你的剪切块的边框顶部很厚，在这种情况下你的代码可能是这样的：

 border-image: url("//i.imgur.com/hg2Thfa.png") 20 0 0 0 stretch;

这意味着div的顶部边框将使用您正在使用的图像的前20个像素，而图像的其余部分将仅用于div的内容区域。无论哪种方式，您可以使用border-image实现所需的效果。

这是最好的方式/唯一方式吗？可能不是，但这是一种方式。

这是小提琴：http://jsfiddle.net/FCXGu/3/

我添加了一个内容区域，仅用于说明此内容的所有内容：http://jsfiddle.net/FCXGu/4/

如果没有看到您的确切图像，页面和用法，我无法告诉您创建png的最佳方法，请使用stretch vs repeat等。但是border-image非常灵活。但它并不适用于所有浏览器。只是好的。