Изображение с прозрачными и полупрозрачными частями

Я хочу создать изображение с прозрачными и полупрозрачными частями в нем, так что если я дам, скажем, цвет x в качестве фона, прозрачная часть будет показывать цвет X, а полупрозрачная часть будет показывать оттенок градиента цвета X .

Мне нужно такое изображение для использования в шаблонах, которые будут использоваться клиентами с разными цветовыми темами.

Изменить: вопрос в том, как создать как прозрачные, так и полупрозрачные части изображения? Любые указатели, пожалуйста.

Изменить: я уточняю свой вопрос. На прикрепленном изображении есть прозрачная область. Идея заключалась в том, чтобы иметь прозрачную область, а также полупрозрачную область (область по направлению к указателю, в настоящее время она не полупрозрачная) на изображении, так что если я укажу красный как цвет bg, прозрачная область будет отображать красный цвет, а полупрозрачная область будет иметь градиентный оттенок красного. Я хочу знать, как сделать область возле указателя полупрозрачной в gimp. Любые идеи, пожалуйста.

введите описание изображения здесь

Спасибо.


image css transparency
person CodeTweetie    schedule 21.05.2012    source источник
comment
А в чем вопрос? Ты пробовал? PNG поддерживает альфа-прозрачность (кроме IE6, но для этого есть исправления).   -  person kapa    schedule 21.05.2012
comment
Изображения PNG в современных браузерах будут делать это.   -  person Anders Lindahl    schedule 21.05.2012
comment
en.wikipedia.org/wiki/Portable_Network_Graphics   -  person Yoshi    schedule 21.05.2012

Ответы (2)


arrow_upward
0
arrow_downward

Используйте изображение 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>

Встроенный цвет будет перекрывать цвет transparent из CSS, а сплошной цвет будет под изображением.

person Alex Gyoshev    schedule 21.05.2012
comment
Привет, спасибо за ответ. Как преобразовать этот png в формат png-24? dev.avvio.com/svn_convert/arrow.png - person CodeTweetie; 21.05.2012
comment
Пробовал вашу идею с вышеуказанным png. Встроенный цвет отображается вместо прозрачной области, но сплошной цвет не отображается вообще. Это не так, как я хочу. - person CodeTweetie; 21.05.2012

arrow_upward
0
arrow_downward

Если вы хотите сделать это на чистом 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!
}

Справочник.

person Simon Dragsbæk    schedule 21.05.2012
comment
Таким образом, вы можете делать это с несколькими изображениями без необходимости каждый раз переделывать каждое изображение. Допустим, у вас есть 100 изображений, и вы решили, что непрозрачность 80% была неправильной, но 70 было тогда, это то, что я рекомендую - person Simon Dragsbæk; 21.05.2012