О сайтостроении, музыке и путешествиях- YaC 2013
- Всё, что вы делаете в Vim неправильно
- CSScomb 2.06
- IntelliJ IDEA → VIM
- Подкаст «Сделайте мне красиво!»
- Разыскиваются настройки
- Твиттер на коленке
- Видео с 404fest
- Домены .рф и зоны первого уровня
- Самое лучшее видео с 404fest
- Еду в Самару
- О локализации сайта
- Javascript API
- Автообновление IE9
- HTML5 Killers
- IE9 beta
- Про ссылки на RSS
- Про Flexbox, Grid, Template layout
- О теге audio и его атрибуте loop
- Управление цветами при помощи CSS
- Пишите правильно: «репозиторий»
- Лирическая заметка о WSD'09 в Минске
- CSS Reorder: Divide et impera
- О Минске, стандартах и просветлении
- Пятница — день обновлений CSS reorder
- Онлайн инструмент для сортировки CSS свойств
- H1
- Фотки с Я.Субботника
- HTML 5 demos
- Первый в мире сайт
- Вложенные списки
- Верстка сервисной навигации
- Про отсутствие курсора и как следствие :hover
- Футболки
- Масштабирование размера шрифта в IE
- Способ заклуглять уголки без картинок и без JavaScript
- Метассылки и кнопки в веб-интерфейсах
Кроссбраузерные полупрозрачные блоки с использованием opacity
Понадобилось мне сделать полупрозрачный блок с произвольным содержимым. Первым делом я попытался задать opacity для самого блока. Но в этом случае все содержимое тоже начинает просвечивать, чего меня категорически не устраивает.
Я попытался нагуглить какое-нибудь решение, но ничего вразумительного не обнаружил. Попадались только вопросы «как?». В результате написал так: в блок с произвольным содержимым подкладываю в самый конец <div ="bg"></div>.
Вы можете посмотреть живой пример. Фоном может быть как монотонный цвет, так и какое-нибудь изображение.
Итого: сам блок полупрозрачный, а содержимое не тронуто и не просвечивает. То, что надо.
Если вы боретесь за валидность CSS кода, то просто вынесите «костыли для IE» в Conditional comments и решите, какие из CSS правил будут задавать opacity. В примере указанны -moz и -khtml opacity — они пригодятся для поддержки старых браузеров. Думаю в 90% случаев вам они не потребуются и хватит просто opacity из CSS3.
UPD 04.02.2009: Если полупрозрачным фоном будет монотонный цвет, то есть способ лучше, чем описано выше. Использование data:uri и background:rgba() дает новый красивый вариант.