今天，我正在设计一个透明的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渐变实际上是一个
image value，而不是一些可能期望的颜色值。因此，它特别对应于背景图像，而不是背景颜色，或整个背景简写。
基本上，你真正想要做的是分层两个背景图像：梯度上的位图图像。为此，您可以在同一声明中指定它们，并使用逗号分隔它们。首先指定图像，然后指定渐变。如果您指定背景颜色，那么该颜色将始终画在最底下的图像之下，这意味着渐变将覆盖它，但是即使在后备的情况下也可以使用。
由于您包含供应商前缀，因此您需要为每个前缀执行一次，对于无前缀而言需要一次，而对于后退(无梯度)则需要执行一次。为避免重复其他值，请使用longhand属性1而不是背景简写：
#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,#ABAEB3 100%);
background-image: url('../images/sidebar_angle.png'),-webkit-gradient(linear,#ABAEB3));
background-image: url('../images/sidebar_angle.png'),linear-gradient(to bottom,#ADB2B6,#ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6',GradientType=0);
}
不幸的是，这在IE中无法正常工作，因为它使用过滤器进行渐变，它总是在后台绘制。
要解决IE的问题，您可以将过滤器和背景图像放在单独的元素中。这样可以消除CSS3多重背景的强大功能，尽管如此，您只需为所有浏览器进行分层，但这是您必须做的一个折衷。如果您不需要支持不实施标准化CSS渐变的IE版本，则无需担心。
1在技术上，背景位置和背景重复声明在这里适用于这两个层，因为间隙通过重复值而不是被夹住来填充，但是由于背景位置是其初始值，并且背景重复对于梯度覆盖整个元素，这并不重要。处理分层背景声明的细节可以在here中找到。
