Непрозрачный белый фон с rgba отображается серым на белом фоне?

Я добавил прозрачный фон в div на белом фоне вот так:

body {
    background: white;
}

.opaque-white {
    background: rgba(255,255,255,0.95);
    height: 300px;
    width: 300px;
}

<body>

    <div class="opaque-white">
        Area with opaque (opacity: 0.95) background.
    </div>

</body>

Ссылка JSFiddle: http://jsfiddle.net/DvYCA/4/

но по какой-то причине цвет div показывает серый вместо белого. Непрозрачный белый поверх белого должен отображаться ... белым, верно?

Или я ошибаюсь?

РЕДАКТИРОВАТЬ: я добавляю снимок экрана с проблемой. Это очень тонкая разница, но заметная на некоторых экранах. Чтобы на самом деле понять разницу, попробуйте выбрать цвет для левой части изображения с правой областью. Разница между белым и прозрачным-белым-поверх-сплошным-белым :)


colors css opacity
person Spiros Martzoukos    schedule 14.11.2013    source источник
comment
Вы используете IE5, Netscape или что-то в этом роде?   -  person Brewal    schedule 14.11.2013
comment
@ j08691 ха-ха, я так использую это всякий раз, когда кто-то упоминает, что что-то белое: ')   -  person SaturnsEye    schedule 14.11.2013
comment
RGBA не поддерживается во всех браузерах, что может быть проблемой: css-tricks.com/rgba- поддержка браузера   -  person David Nguyen    schedule 14.11.2013
comment
в каком браузере вы наблюдаете такое поведение? Я не вижу этого в последней версии Firefox 25   -  person Jonathan Marzullo    schedule 14.11.2013
comment
Я просматриваю его в последней версии Chrome (31) в Mac OS.   -  person Spiros Martzoukos    schedule 15.11.2013
comment
Я загрузил снимок экрана, чтобы понять, что я имею в виду, возможно, выбрав цвета в разных областях в фотошопе или изменив контраст, чтобы увидеть реальную разницу.   -  person Spiros Martzoukos    schedule 15.11.2013
comment
@SpirosMartzoukos Та же проблема в Firefox 26.0.1 на Android 4.4. Добавление div with background: rgba(255, 255, 255, 0.95); поверх div with background: #FFF становится серым.   -  person Volker E.    schedule 27.01.2014
comment
У меня такая же проблема. Удалось ли вам заставить это работать? У меня возникает соблазн сделать это и протестировать в Windows, чтобы убедиться, что это Mac.   -  person triangulito    schedule 04.06.2014
comment
То же самое и с Windows.   -  person triangulito    schedule 04.06.2014

Ответы (4)


arrow_upward
8
arrow_downward

Это не твой экран. Палитра цветов не врет. Я вижу, что ошибка все еще присутствует в Chrome 38 и Canary 40. У меня сработало добавление transform: translateZ(0); в div .opaque-white.

person Stelian    schedule 14.10.2014
comment
Работал и на меня - person technopeasant; 12.12.2014

arrow_upward
1
arrow_downward

Похоже на ошибку: Chrome объединяет и выводит rgb (254 254 254), в то время как Safari выводит rgb (255 255 255). Интересно, что не имеет значения, какое альфа-значение вы используете, Chrome всегда выводит один и тот же цвет. Он показывает полностью белый цвет только в том случае, если у вас есть альфа-значение 0 или 1, все, что находится между ними, дает легкий не совсем белый цвет.

person Dre    schedule 29.09.2014

arrow_upward
0
arrow_downward

Ваш снимок экрана, кажется, показывает желаемый эффект - он кажется мне белым, и при открытии его в фотошопе видно, что одна сторона - 255 255 255, а другая - 254 254 254.

Вы проверяли это на другом мониторе? Мне кажется, что решение (или, скорее, проблема) на самом деле локальное - возможно, ваш экран или какой-то поврежденный файл .icm.

Вы можете попробовать использовать шестнадцатеричное значение и атрибут непрозрачности?

.opaque-white {
background: #ffffff;
opacity:.95;
}

Вот скрипка: http://jsfiddle.net/Gv59a/

person Octavian    schedule 18.03.2014

arrow_upward
0
arrow_downward

Я столкнулся с этой проблемой и обнаружил, что между двумя разными мониторами можно наблюдать разницу.

На основном мониторе я вижу серый цвет, а на дополнительном - белый.

Разные технологии отображения используют немного разные алгоритмы для расчета того, что отображать для каждого пикселя, и любая технология отображения могла ухудшиться по-разному, что могло повлиять на точность.

Я также обнаружил, что угол обзора может усилить эффект http://www.techmind.org/lcd/colour.html.

Попробуйте просмотреть свой сайт / примеры на разных мониторах.

person Toni Leigh    schedule 19.06.2014