带有渐变的透明背景图像
今天我设计了一个透明的PNG背景，它只能坐在div的左上角，div的其余部分会为PNG的所有透明区域和div的其余部分保留渐变背景。
通过我认为可能工作的代码来解释可能会更好：
#mydiv .isawesome {
/* Basic color for old browsers, and a small image that sits in the top left corner of the div */
background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;
/* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}
我一直在寻找的是，大多数浏览器选择一个或另一个 - 大多数选择渐变，因为它进一步向下CSS文件。
我知道这里的一些人会说“只是将梯度应用到你制作的PNG” - 但那不是很理想，因为div会保持动态高度 - 有时非常短，有时非常高。 我知道这个渐变不是必需的，但我认为它可能值得问你们是什么想法。
是否可以有一个背景图像，同时保持背景的其余部分为渐变？
请记住，CSS渐变实际上是一个图像值，而不是某些人所期望的颜色值。 因此，它具体对应于background-image ，而不是background-color ，或整个background简写。
本质上，你真正想要做的是分层两个背景图像：一个渐变的位图图像。 为此，您可以在同一个声明中指定它们，并用逗号分隔它们。 首先指定图像，然后指定渐变。 如果您指定背景颜色，则该颜色将始终绘制在最底部图像下方，这意味着渐变可以很好地覆盖它，即使在后退情况下它也可以工作。
由于您包含供应商前缀，因此您需要为每个前缀执行一次此操作，一次执行前缀操作，另一次执行后备操作（无梯度操作）。 为避免重复其他值，请使用longhand属性1代替background缩写：
#mydiv .isawesome {
background-color: #B1B8BD;
background-position: 0 0;
background-repeat: no-repeat;
/* Fallback */
background-image: url('../images/sidebar_angle.png');
/* CSS gradients */
background-image: url('../images/sidebar_angle.png'),
-moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background-image: url('../images/sidebar_angle.png'),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
background-image: url('../images/sidebar_angle.png'),
linear-gradient(to bottom, #ADB2B6, #ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}
不幸的是，这并不正确，在IE，因为它使用的工作filter的梯度，它总是绘制在背景上 。
要解决IE的问题，你可以将filter和背景图像放在不同的元素中。 然而，这将消除CSS3多种背景的力量，因为你可以对所有浏览器进行分层，但这是你必须做出的折衷。 如果您不需要支持不实现标准化CSS渐变的IE版本，则无需担心。
1从技术上讲， background-position和background-repeat声明适用于这两个图层，因为间隙是通过重复值而不是被夹住来填充的，但是由于background-position是其初始值和background-repeat对于覆盖整个元素的渐变，并不重要。 可以在这里找到如何处理分层背景声明的细节。
图像和渐变的顺序非常关键，我想说清楚。 渐变/图像组合效果最好，就像这样...
background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');
background-image也将工作...
background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');
梯度需要先到达...顶部。 这里的绝对关键是渐变使用至少 1个RGBA颜色......颜色必须透明才能让图像通过。 （ rgba(20,20,20,***0.5***) ）。 首先将渐变放置在图像的顶部，然后css将渐变放置在图像顶部，因此RGBA上的alpha设置越低，看到的图像就越多。
另一方面，如果使用相反的顺序，那么PNG需要具有透明属性，就像渐变一样，让渐变透过。 该图像最上面，所以你的PNG需要保存为24位的阿尔法区域的photoshop或32位的阿尔法区域（或gif我猜... barf）烟花，所以你可以看到下面的梯度。 在这种情况下，渐变可以使用HEX RGB或RGBA。
这里的关键区别在于外观。 顶部时，图像将更加生动。 在下面，您可以调整浏览器中的RGBA值以获得所需的效果...而不是从图像编辑软件中来回编辑和保存。
希望这会有所帮助，请原谅我的简化。
您可以使用透明度和渐变。 渐变支持透明度。 例如，您可以在堆叠多个背景时使用此功能，以在背景图像上创建淡化效果。
background: linear-gradient(to right, rgba(255,255,255,0) 20%,
rgba(255,255,255,1)), url(http://foo.com/image.jpg);
