覆盖背景颜色

Question

我有关于 CSS 的问题。

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

我想要的是用 png 文件的透明度覆盖 background-color，这样背景就不会覆盖我的 png 文件。我会给你图片来告诉你我的意思：

现在图像与我想要获得的结果（上图） - 带有来自 html 样式的背景。

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

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

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、使用拉伸与重复等的最佳方法。但是边框图像非常灵活。但是，它不适用于所有浏览器。只有好的。