java 图片渐变消失_透明背景图像与渐变

请记住，CSS渐变实际上是image value，而不是某些人可能期望的颜色值 . 因此，它特别对应于 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渐变，那么您无需担心 .

1从技术上讲，背景位置和背景重复声明适用于这两个层，因为通过重复值而不是钳位来填充间隙，但是因为背景位置是其初始值而背景重复对于渐变覆盖整个元素，没关系太多 . 可以在此处找到有关如何处理分层背景声明的详细信息 .