包含透明和半透明部分的图像

Question

我想创建一个包含透明和半透明部分的图像，这样如果我给，比如说颜色x作为背景，透明部分将显示x颜色，半透明部分将显示颜色x的渐变阴影。

我需要这样一个图像在模板中使用，将由客户谁将有不同的颜色主题使用。

编辑：问题是如何创建既透明

编辑：我让我的问题更清楚了。在附加的图像中，有一个透明区域。想法是在图像中有一个透明区域和一个半透明区域（指向指针的区域，目前这不是半透明的），这样如果我给红色作为bg颜色，透明区域将显示红色

谢谢。

Answer 1

如果你想在纯css中使用它，你可以将图片分解，然后像猫一样将其组合在一起，然后给每个砖块一个类，你可以用不同的不透明度来设置样式

.test {
background-color: #6374AB;
width: 100%;
color: #ffffff;
}

.opaque1 {  // for all other browsers
    opacity: .5;
}

.opaque2 {  // for IE5-7
    filter: alpha(opacity=50);
}

.opaque3 {  // for IE8
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

IE兼容性说明

如果您希望不透明度在所有IE版本中工作，顺序应该是：

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
    filter: alpha(opacity=50);                  // second!
}

参考

Answer 2

使用PNG-24图像并设置保存该图像的元素的背景色：

<div id="header" style="background-color: #f00"></div>

<style>
    #header {
        background: transparent url("header-background.png") no-repeat 50% 0;
        height: 100px;
    }
</style>

内联颜色将覆盖来自CSS的透明颜色，而纯色将位于图像下方。