2012-07-02 4 views
0

Я установил определенный цвет фона для тела. Затем я хочу использовать другой div с тем же цветом фона, но с непрозрачностью: .95 как маску для анимации контента в нижней части страницы. Это приводит к тому, что маскирующий div выглядит немного другим цветом. Есть ли способ обойти это?CSS: непрозрачность вызывает незначительное изменение цвета фона

Посмотрите скриншот here и пример CSS ниже. Я нахожусь на Chrome 20 на Lion.

body 
{ 
    background: #3f3c45; 
} 

#bottommask 
{ 
    background: #3f3c45; 
    opacity: .95; 
} 

UPDATE: Пожалуйста, проверьте this fiddle демонстрирует этот вопрос


ОБНОВЛЕНО РЕШЕНИЕ: Кажется, что по крайней мере, в Chrome, используя -webkit-отсев-видимость: скрытый; на маске div решает проблему.

+7

То, что должно произойти с непрозрачностью. Вы понимаете, как работает непрозрачность? –

+0

ummm, что вы ожидали от этого? Более светлый оттенок этого цвета ... «слегка» разного цвета –

+0

Я бы подумал, что если я изменю только непрозрачность и окажусь таким же цветом, что разница не будет отображаться. Я очень хорошо знаю, как работает прозрачность, и то, что я ожидал, - это именно то, что делает Photoshop, но я думаю, что это не то, как браузеры обрабатывают его. Есть ли другой способ достижения этого эффекта, если не с непрозрачностью? – verde

ответ

0

Это вопрос вычисления эффекта увеличения 5% цвета снизу.

Три способ:

  • счетных или
  • пробы/ошибка выбора цвета Firebug или
  • сделать скриншот и образцом прозрачного цвета, а затем применить сэмпл цвет к не альфа фоне ,

Для сайта татуировки я изменился на несколько иной цвет, чтобы учитывать смещение цвета непрозрачности.

body { 
    background: #8d918f; 
} 

enter image description here

+0

Спасибо Эрик, но я пробовал rgba, и результат тот же. Я думаю, вы меня неправильно поняли, я говорю о чистоте цвета на чистом цвете. Вот скрипка, демонстрирующая проблему: [link] (http://jsfiddle.net/dtailed/c6V8V/) – verde

+0

@dtailed Сообщите мне, если это то, что вам нужно. «Div» с небольшим прозрачным содержимым, но с тем же цветом, что и ниже? –

+0

Вот и все. Он даже не имеет контента, он просто должен быть слегка прозрачным, но по-прежнему иметь тот же цвет, что и ниже. – verde

Смежные вопросы