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

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

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

编辑：问题是如何在图像中创建透明和半透明部分？请给我指点

编辑： 我把我的问题说得更清楚了。在附加的图像中，有一个透明区域。想法是在图像中有一个透明区域和一个半透明区域（指向指针的区域，目前这不是半透明的），这样如果我给红色作为背景色，透明区域将显示红色&半透明区域将显示红色的渐变阴影。我想知道如何在gimp中将指针附近的区域设置为半透明。有什么想法吗

---

谢谢。

使用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>

#标题{
背景：透明url（“header background.png”）不重复50%0；
高度：100px；
}

---

内联颜色将覆盖CSS中的

透明

颜色，纯色将位于图像下方。

如果您想在纯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!
}

---

问题是什么？你试过了吗？PNG支持alpha透明（IE6除外，但有修复程序）。现代浏览器中的PNG图像可以做到这一点。通过这种方式，您可以在没有每张图片的情况下处理多张图片，每次都需要重新处理。假设你有100张图片，你决定80%的不透明度是不对的，但70%是对的，这就是我的建议嗨，谢谢你的回答。如何将此png转换为png-24格式？用上面的png尝试了你的想法。内联颜色代替透明区域显示，但纯色根本不显示。这不是我想要的方式。