1

我有关于 CSS 的问题。

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

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

透明png文件

没有透明度的情况

结果

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

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

在此处输入图像描述 在此处输入图像描述

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

4

1 回答 1

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

于 2013-02-24T19:48:29.043 回答