具有透明和半透明部分的图像

Question

我想在其中创建一个包含透明和半透明部分的图像，因此如果我给出颜色x作为背景，则透明部分将显示X颜色，半透明部分将显示渐变阴影颜色X.

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

编辑：问题是如何同时创建透明＆amp;图像中的半透明部分？请指点。

编辑： 我的问题更清楚了。在附图中，有一个透明区域。想法是在图像中有一个透明区域和一个半透明区域（朝向指针的区域，目前这不是半透明的），因此如果我将红色作为bg颜色，则透明区域将显示红色和＆amp;半透明区域将显示渐变的红色阴影。我想知道如何使指针附近的区域在gimp中变为半透明。请任何想法。

感谢。

Answer 1

使用PNG-24图像并设置保存它的元素的background-color：

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

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

内联颜色将覆盖CSS中的transparent颜色，纯色将位于图像下方。

Answer 2

如果你想用纯净的css做，你可能会破坏图片，然后像pusle一样将它设计成一个样式，然后给每个砖块一个你用不同的不透明度设计的类

.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!
}

的 Reference 的