Цвет фона CSS не работает должным образом - PullRequest
Новая
       16

Цвет фона CSS не работает должным образом

2 голосов
/ 07 сентября 2011

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

Страница, о которой идет речь: http://www.preview.imageworkshop.com/portfolio/

Тиражирование вопроса

  1. Сначала откройте вышеуказанную ссылку в IE 7 или IE 8
  2. Нажмите фильтр ПРОДУКТ, затем нажмите фильтр PROMO & EDITORIAL
  3. На некоторых изображениях появятся белые точки (это ошибка в IE, из-за которой некоторые пиксели остаются прозрачными после исчезающей анимации. Если вы их не видите, сделайте немного больше фильтрации, они появятся довольно быстро.

ПРОБЛЕМА ЦВЕТА ФОНА CSS

Что работает: Если я установил красный цвет фона галереи, то этот красный цвет показывает прозрачные пятна на изображениях. (Вывод: черный фон скрывает ошибку «белых пятен»). 

#isotopegallery{background:red;}

Что не работает: Очевидно, я не хочу устанавливать цвет фона галереи, кроме белого. То, что я хочу сделать, это установить цвет фона DIV, который содержит изображения, например: 

.photo{background:red;}

однако, когда я делаю это, красный цвет фона не проявляется через прозрачные пиксели ??

Упрощенный обзор структуры элементов выглядит следующим образом 

<div id="isotopegallery" class="photos">
    <div id="ngg-gallery-18-71">
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
    </div>
</div>

HELP!

Я не могу понять, почему этот цвет фона работает для # isotopegallery родительского DIV, но не для .photo DIV?

Когда я смотрю в firebug, свойство color устанавливается для div .photo, но не отображается через прозрачные пиксели?

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

ПРИМЕЧАНИЕ: есть информация, которая предполагает, что изменение черной точки изображений в фотошопе решит эту проблему. Мы попробовали этот метод и обнаружили, что он не работает.

Ответы [ 3 ]

0 голосов
/ 08 сентября 2011

Создатель изотопа помог мне взглянуть на эту проблему и добавил следующий комментарий:

"Провел еще какое-то тестирование. Я пришел к выводу, что IE обрабатывает Весь элемент, который содержит изображение, как одно изображение. Что бы ни было видимое сглаживается. Если этот элемент имеет истинно черный пиксель внутри изображение, чем этот пиксель элемента будет рассматриваться как прозрачный, независимо от того, что на самом деле скрывается за изображением.

Взгляните на: http://support.metafizzy.co/2011/09-06-ie-trans.html

Вы увидите пару прозрачных пикселей, даже если фон каждого элемента четко красный (элементы имеют отступы, фон красный). Затем я динамически изменил их цвет на синий и пиксель все еще прозрачен.

Что означает, что единственное чисто CSS-решение - установить контейнер черный фон "

Не уверен, куда идти отсюда. Мы попытались переместить черную точку (так как это должно быть вызвано настоящими черными пикселями), но обнаружили, что это неудачный метод.

0 голосов
/ 21 сентября 2011

Я нашел решение этой проблемы.Я опубликовал полную информацию по этой теме (ссылка ниже), которая более подробно описывает проблему.

IE исчезает, вызывая белые пятна на изображениях

0 голосов
/ 07 сентября 2011

Вы плаваете в элементах интерьера .photo, не очищая их?Это не позволит цвету фона покрыть высоту рассматриваемого элемента.

Если это так, добавление чего-то вроде <br style='clear: both;' /> в .photo div должно помочь.

Аналогично, вы всегда можете попробовать применить цвет фона к самим элементам img: .photo img { background-color: red;}

...