CSS "сквозной" фон - сумасшедшая проблема с навигационным меню

У меня есть сумасшедшее меню навигации, которое мне нужно закодировать. Это тяжело. Пожалуйста, смотрите скриншот дизайна здесь:

навигационное меню http://i41.tinypic.com/307xfo9.png

снимок экрана меню навигации

Как вы можете видеть, фон меню "Главная" довольно жесткий! Я не могу понять, как сделать свой фон "прозрачным", что означает, что он прорезает темный фон и показывает узорный зеленый фон.

Знаете ли вы, как это сделать, используя css?

Спасибо заранее.

5 ответов

Вы можете использовать либо:

background: transparent;
background: inherit;

Но вам нужно структурировать свой HTML-код, чтобы в поле с фоном были встроены ссылки Главная, Журнал и т.д..

Для закругленных углов проверьте это.

Или вы можете использовать изображения с прозрачной формой в качестве фона.

@Gary [комментарий]: inherit захватывает первые настройки, которые он находит, поднимаясь по иерархии. Поэтому, если у вас средний слой, он будет собирать свои настройки вместо этого.

Что-то, что вы могли бы попробовать, это использовать:

background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */

В теории, тогда он должен искать первую настройку background-image. Но я никогда не использовал это, поэтому никаких гарантий.


Один из способов сделать это - это противоположный подход, который вы обычно делаете. Примените черный фон к другим элементам, оставив промежуток, где выделена вкладка. Вид обратных раздвижных дверей.

Создайте два очень длинных черных изображения: один справа, у которого есть закругленный угол слева, а один слева - с углом справа и расположите их по обе стороны от текущего элемента. К сожалению, я не думаю, что простой CSS сможет это сделать, но похоже, что вы уже используете JS.

Я не уверен, насколько это осуществимо, это просто с моей головы, но это может быть интересный подход.


Еще один интересный подход к прозрачным (или полупрозрачным) эффектам - это дать два раздела:

1) то же фоновое изображение, или 2) похожие фоновые изображения, причем один из них модифицирован цветом или размытием или любым другим

... и убедитесь, что их background-position совпадает с.

Это демонстрируется в Эрик Мейер "Комплексная спираль" демо. (Здесь другая версия, которую он сделал.)

Разъяснение: это в разделе "Край" Мейера по какой-либо причине - он не совместим с IE6. (Спасибо, Борис.)


Я предлагаю создать изображение размером 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

НТН


Вы можете эмулировать фиксированное положение фона, к сожалению, не поддерживаемое IE6 (см. ответ nerdposeur) с осторожным "ручным" позиционированием с использованием фонового положения. Поместите большое изображение с 0,0 смещением. Используйте одно и то же изображение для выбранной вкладки, но смещайте его влево и вверх, точно в положение верхнего левого угла вкладки. Это обеспечит точное совпадение двух фонов, которые вы хотите.

У вас, похоже, есть фиксированное меню, поэтому это означает тщательное написание фонового CSS для ваших четырех элементов меню, один за другим. Конечно, если ваше меню динамично, этот подход не работает. Вот демо, которое я быстро приготовил, начиная с этой страницы:

<title>CSS Tabbed Navigation</title>
 
 
<ul id="tabmenu">
 <li><a href="tab1.html">Enormous</a></li>
 <li><a 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 Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
 
</div>

licensed under cc by-sa 3.0 with attribution.