0

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

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

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

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

在此处输入图像描述

谢谢。

4

2 回答 2

0

If you wanna do it in pure css you might break up the picture and then style it together like a pusle, And then give each brick a class which you style with different opacity

.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 compatibility note

If you want opacity to work in all IE versions, the order should be:

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

Reference.

于 2012-05-21T09:05:33.610 回答
0

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

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

于 2012-05-21T08:49:49.867 回答