CSS "прозрачный" фон - сумасшедшая проблема с меню навигации
У меня сумасшедшее меню навигации, которое мне нужно кодировать. Это довольно сложно. Смотрите скриншот дизайна здесь:
Как видите, фон у пункта меню "Домой" довольно жесткий! Я не могу понять, как сделать фон «прозрачным», то есть он прорезает темный фон и показывает узорчатый зеленый фон.
Вы знаете, как это сделать с помощью CSS?
Заранее спасибо.
Ответы 5
Вы можете использовать:
background: transparent;
background: inherit;
Но вам необходимо структурировать свой HTML так, чтобы ссылки Дом, Журнал и т. д. Были встроены в поле с фоном.
Для закругленных углов Проверь это.
Или вы можете использовать изображения с фигурной прозрачностью в качестве фона.
@Gary [комментарий]: inherit берет первые настройки, которые находит, поднимаясь вверх по иерархии. Так что, если у вас есть средний уровень, вместо этого он подберет свои настройки.
Тогда вы можете попробовать использовать:
background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
Теоретически тогда он должен искать первую настройку background-image. Но я никогда этим не пользовался, поэтому никаких гарантий.
Спасибо за ваше решение. Я попробую "фон: наследовать", чтобы посмотреть, работает ли он (с некоторой реструктуризацией, как вы предложили). Раньше я пробовал много способов, но головная боль заключается в том, как плавно смешивать фон пунктов меню с узорчатым фоном. Спасибо и за закругленные углы!
@ strager: Конечно, фон: прозрачный - это первое, что пришло мне в голову. Но я бы хотел, чтобы все было так просто. Дело в том, что меню навигации заключено в слой с цветом фона. Таким образом, использование прозрачности здесь не откроет под ним зеленый узорчатый фон.
Сообщите нам, сработало ли наследование. Любопытно посмотреть на результат.
Еще один интересный подход к прозрачным (или полупрозрачным) эффектам состоит в том, чтобы дать два раздела либо
1) то же фоновое изображение, или
2) похожие фоновые изображения, одно из которых изменено цветом, размытием или чем-то еще.
... и убедитесь, что их background-position такой же.
Это продемонстрировано в Демо Эрика Мейера "Комплексная спираль". (Вот другая версия, который он сделал.)
Разъяснение: это неспроста в разделе "Edge" Мейера - это не совместим с IE6. (Спасибо, Борис.)
Хотя действительно круто, эффект не будет работать в IE lt 7. Если вас это устраивает, то никаких проблем :)
Гэри не нужно применять эффекты к фоновой картинке. Может быть, он сможет заставить его работать и в IE6, используя тот же фон с разные (подходящим) background-position? Body будет использовать 0,0; Home будет использовать 100, 120, журнал 100, 200 и так далее.
Вы можете эмулировать фиксированное положение фона, к сожалению, не поддерживаемое IE6 (см. Ответ ботаника) с осторожным «ручным» позиционированием с использованием background-position. Расположите большое изображение со смещением 0,0. Используйте то же изображение для выбранной вкладки, но сместите его влево и вверх точно на положение верхнего левого угла вкладки. Это обеспечит точное соответствие двух желаемых фонов.
Кажется, у вас есть фиксированное меню, поэтому это означает, что нужно тщательно писать фоновый CSS для четырех элементов меню, один за другим. Конечно, если ваше меню динамическое, этот подход не работает. Вот демо, которое я быстро приготовил, начиная с эта страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<title>CSS Tabbed Navigation</title>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
<style type = "text/css">
body {
margin: 20px;
padding: 0px;
background: #CACCB4;
font: 16px arial, sans-serif;
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
}
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a.active {
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
background-position: -125px -18px;
border-bottom: 3px solid #ABAD85; }
#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ABAD85;
padding: 20px;
border: 2px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #898B5E; }
</style>
</head>
<body>
<ul id = "tabmenu">
<li><a href = "tab1.html">Enormous</a></li>
<li><a class = "active" href = "tab2.html">Flared</a></li>
<li><a href = "tab3.html">Nostrils</a></li>
</ul>
<div id = "content">
<p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
<p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
<br />
</div>
</body>
</html>
Мне нравится, как ваш «быстрый» пример заботится даже о настройках шрифтов и т. д.: P Работал в Opera, но IE лажает (сюрприз!).
Один из способов, которым вы могли бы это сделать, - это подход, противоположный тому, который вы обычно использовали бы. Примените черный фон к другим элементам, оставив зазор там, где находится выделенная вкладка. Вид реверсивных раздвижных дверей.
Создайте два очень длинных черных изображения: одно для правого с закругленным углом слева и одно для левого с углом справа и расположите их по обе стороны от текущего элемента. К сожалению, я не думаю, что простой CSS сможет это сделать, но похоже, что вы уже используете JS.
Я не уверен, насколько это возможно, это просто не в моей голове, но это может быть интересный подход.
Я предлагаю сделать изображение 30 x 1 (высота x ширина), заполнить его черным и установить для него непрозрачность примерно 35% ... Сохранить как .png (несовместимо с браузерами <IE7)
Добавьте это изображение в свой класс CSS фона меню следующим образом:
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
Я знаю, что это работает, потому что это то, что я сделал для своего сайта. Сайт не завершен, но вы можете посмотреть снимок экрана:
http://www.logansarchive.za.net/preview.jpg
HTH
Или фон: прозрачный; ?