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

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

4 голосов
/ 21 декабря 2008

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

nav menu

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

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

Знаете ли вы, как сделать это с помощью CSS?

Заранее спасибо.

Ответы [ 5 ]

2 голосов
/ 21 декабря 2008

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

background: transparent;
background: inherit;

Но вам нужно будет структурировать свой HTML таким образом, чтобы ссылки Home , Journal и т. Д. Были встроены в коробка с фоном.

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

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

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

То, что вы можете попробовать, это использовать: 

background-image: url('greencheckers'); /* outer */

background-color: black;                /* middle */

background-image: inherit;              /* link */

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

1 голос
/ 22 декабря 2008

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

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

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

0 голосов
/ 01 октября 2010

Я предлагаю сделать изображение размером 30 x 1 (высота x ширина), залить его черным и установить непрозрачность около 35% ... Сохранить как .png (не совместимо с браузерами

Добавьте это изображение в класс CSS фона вашего меню следующим образом: 

#MainMenu {
    display: block;
    height: 30px;
    background; transparent url("menuBG.png") repeat-x;
}

Я знаю, что это работает, потому что это то, что я сделал для своего сайта. Сайт не завершен, но вы можете посмотреть скриншот:

http://www.logansarchive.za.net/preview.jpg

НТН

0 голосов
/ 22 декабря 2008

Вы можете эмулировать фиксированное положение фона, к сожалению, не поддерживаемое IE6 (см. Ответ nerdposeur) с осторожным «ручным» позиционированием с использованием 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>
0 голосов
/ 22 декабря 2008

Другой интересный подход к прозрачным (или полупрозрачным) эффектам состоит в том, чтобы выделить два раздела либо

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

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

Это продемонстрировано в Эрик Мейер "Сложная спираль" демо . (Вот другая версия он сделал.)

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

...