Непрозрачность фонового цвета, но не текст
Как сделать прозрачность кросс-браузера (включая Internet Explorer 6) на фоне div пока текст остается непрозрачным?
Мне нужно сделать это, не используя какую-либо библиотеку, такую как jQuery и т. Д. (Но если вы знаете о библиотеке, которая делает это, я бы хотел знать, поэтому я могу посмотреть на их код).
- Как установить непрозрачность (альфа) для просмотра в Android
- Непрозрачность границ CSS3?
- Как сделать мигающий / мигающий текст с помощью CSS 3?
- Непрозрачность CSS не работает в IE8
- Установите непрозрачность фонового изображения, не затрагивая дочерние элементы.
- как отменить непрозрачность для дочернего элемента?
- Использование CSS для эффекта затухания при загрузке страницы
- Непрозрачность фона div, не затрагивая содержащийся элемент в IE 8?
- Есть ли способ навести курсор на один элемент и повлиять на другой элемент?
- изображение перемещается по hover - проблема непрозрачности хрома
- Что имеет более высокий приоритет: непрозрачность или z-индекс в браузерах?
- как обрабатывать «двойную непрозрачность» двух перекрывающихся divs
- Прозрачность CSS только для цвета фона, а не текста на нем?
Используйте rgba!
.alpha60 { /* Fallback for web browsers that don't support RGBa */ background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background-color: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }
В дополнение к этому, вы должны объявить
background: transparentдля веб-браузеров IE, желательно с помощью условных комментариев или подобных!
Для этого я использую альфа-прозрачный PNG:
div.semi-transparent { background: url('semi-transparent.png'); }
Однако для IE6 вам нужно использовать исправление PNG ( 1 , 2 ).
Я создал этот эффект на моем блоге Landman Code .
То, что я сделал, было
#Header { position: relative; } #Header H1 { font-size: 3em; color: #00FF00; margin:0; padding:0; } #Header H2 { font-size: 1.5em; color: #FFFF00; margin:0; padding:0; } #Header .Background { background: #557700; filter: alpha(opacity=30); filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.3; zoom: 1; } #Header .Background * { visibility: hidden; // hide the faded text } #Header .Foreground { position: absolute; // position on top of the background div left: 0; top: 0; }
Title
Subtitle
Title
Subtitle
Рассматривая требования к работе с IE6 и устаревшими браузерами, вы можете использовать :: before и display: inline-block
div { display: inline-block; position: relative; } div::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background:red; opacity: .2; }тогоdiv { display: inline-block; position: relative; } div::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background:red; opacity: .2; }
Демо на http://jsfiddle.net/KVyFH/172/
Он будет работать в любом современном браузере
Спасибо @ davy-landmann за https://stackoverflow.com/a/638064/417153 . Это то, что я искал! Тот же эффект с кодом LESS:
@searchResultMinHeight = 200px; .searchResult { min-height: @searchResultMinHeight; position: relative; .innerTrans { background: white; .opacity(0.5); min-height: @searchResultMinHeight; } .innerBody { padding: 0.5em; position: absolute; top: 0; } }