CSS RGBA граничит / фоновая альфа дважды
Я работаю над веб-сайтом, который имеет большую прозрачность, включенную, и я думал, что попытаюсь создать ее полностью в RGBA и затем сделать нейтрализации для IE. Мне нужен краевой эффект стиля "facebox", где внешняя граница округлена и менее непрозрачна, чем фон поля, это окружает.
Последний пример из http://24ways.org/2009/working-with-rgba-colour, кажется, предполагает, что это возможно, но я, может казаться, не заставляю это работать. Когда я пробую следующее:
RGBA Test
This should look like a facebox.
Кажется, что фон "расширяется" под границей элемента, который заставляет пиксельные значения быть добавленными вместе. Таким образом, когда и фон и граница являются полупрозрачными, граница ВСЕГДА будет более непрозрачной, чем фон элемента. Это - точно противоположность того, чего я пытаюсь достигнуть, но кажется, что это должно быть возможно на основе примеров, которые я видел.
Я должен также добавить, что не могу использовать другой элемент в контейнере, потому что я также собираюсь использовать радиус границы на контейнере для получения скругленных углов, и WebKit придает углам квадратную форму дочерних элементов, если им присвоили фон, который был бы чрезвычайно средний округленная внешняя граница с квадратным содержанием.
Извините я не могу отправить изображение этого... По-видимому, у меня нет достаточного количества представителя для регистрации изображения.
1 ответ
Тестирование в Firefox подтверждает то, что вы описываете - и мне потребовалось некоторое время, чтобы осознать последствия этого! Менее прозрачная граница не повлияет на прозрачный фон под ней, потому что граница (как вы говорите) является аддитивной.
В этом случае вам придется смоделировать желаемый эффект и работать с цветами больше, чем с альфа-каналом:
background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);