CSS “voir à travers” background - fou menu de navigation de problème

J'ai un fou menu de navigation que j'ai à code. C'est un peu difficile. Consultez la capture d'écran de la conception ici:

menu de navigation capture d'écran

Comme vous pouvez le voir, le fond de la "Maison" dans le menu est assez rude! Je ne peux pas comprendre comment faire de son arrière-plan "see-through", ce qui signifie qu'il coupe à travers le fond sombre et indique les motifs sur fond vert.

Savez-vous comment faire cela en utilisant le css?

Merci d'avance.

OriginalL'auteur | 2008-12-21

2

Vous pouvez utiliser soit:
```
background: transparent;
background: inherit;
```
Mais, vous aurez besoin de la structure de votre code HTML afin que le Maison, Journal, etc. les liens sont intégrés dans la boîte à l'arrière-plan.

Pour les coins arrondis, check this out.

Ou vous pouvez utiliser les images en forme de transparence que l'arrière-plan.

@Gary [commentaire]: inherit attrape la première paramètres qu'il trouve en remontant la hiérarchie. Donc, si vous avez une couche intermédiaire, il va ramasser sur ses paramètres à la place.

Quelque chose que vous pourriez essayer est alors à utiliser:
```
background-image: url('greencheckers'); /* outer */

background-color: black;                /* middle */

background-image: inherit;              /* link */
```
En théorie, il devrait regarder pour la première background-image réglage, puis. Mais, je ne l'ai jamais utilisé, donc pas de garanties.

Ou background: transparent; ?
Merci pour votre solution. Je vais essayer "background:inherit" pour voir si ça fonctionne (avec quelques restructurer comme vous l'avez suggéré). J'ai essayé de nombreuses façons avant, mais le mal de tête est de mélanger l'arrière-plan des éléments de menu avec les motifs d'arrière-plan de façon transparente. Merci pour les coins arrondis des conseils trop!
strager: bien sûr arrière-plan:transparent est la première chose qui m'est venue à mon esprit. Mais je voudrais qu'il en était que plus simple. Le truc, c'est que le menu de navigation est enveloppé à l'intérieur d'un calque avec une couleur d'arrière-plan. Donc, à l'aide de transparents ici ne permet pas de révéler le vert à motifs en arrière-plan derrière.
Laissez-nous savoir si les hériter chose a fonctionné. Curieux de voir le résultat.

OriginalL'auteur Jonathan Lonowski
1

Une façon de le faire est à l'opposé de l'approche que vous pouvez prendre. Appliquer un fond noir pour les autres éléments, en laissant un espace où la en surbrillance l'onglet. Sorte d'inversion des portes coulissantes.

Créer deux très longues noir des images: une pour la droite qui a un angle arrondi sur sa gauche et pour la gauche avec le coin sur la droite et placez-les sur chaque côté de l'élément courant. Malheureusement, je ne pense pas que la plaine CSS sera en mesure de le faire, mais on dirait que vous êtes déjà à l'aide de JS.

Je ne suis pas sûr de savoir comment est ce possible, il est juste à côté de ma tête, mais il pourrait être une approche intéressante.

OriginalL'auteur nickf
0

Une autre approche intéressante pour la transparence (ou translucide) effets est de donner deux sections soit

1) de la même image de fond, ou

2) similaire images d'arrière-plan, avec l'un d'eux modifié avec la couleur ou le flou ou que ce soit

... et assurez-vous que leur background-position est la même.

Cela est démontré dans Eric Meyer Complexes "Spirale" de la démo. (Voici une autre version il a fait.)

Clarification: c'est dans Meyer "Edge" pour une raison - il est pas compatible avec IE6. (Merci, Boris.)

Si vraiment cool, l'effet ne fonctionne pas dans IE lt 7. Si c'est bien pour vous, alors pas de problème 🙂
Vous avez raison, monsieur. Je vous remercie.
Gary n'a pas besoin d'appliquer des effets à l'image de fond. Peut-être qu'il peut le faire fonctionner dans IE6 ainsi avec en utilisant le même fond avec (approprié) background-position? Corps utilisation 0,0; la Maison serait de les utiliser 100, 120, journal 100, 200 et ainsi de suite.

OriginalL'auteur Nathan Long

Vous pouvez émuler l'arrière-plan fixe position malheureusement pas pris en charge par IE6 (voir nerdposeur réponse) avec attention "manuel" positionnement à l'aide de background-position. La Position de la grande image avec 0,0 décalage. Utiliser la même image pour l'onglet sélectionné, mais la décaler vers la gauche et vers le haut par exactement la position du coin supérieur gauche de l'onglet. Assurer la correspondance exacte des deux milieux que vous voulez.

Vous semblez avoir un menu fixe, de sorte qu'il faut soigneusement écrit d'arrière-plan CSS pour vos quatre éléments de menu, un par un. Bien sûr, si votre menu est dynamique, cette approche ne fonctionne pas. Voici une démo, je l'ai cuit rapidement jusqu'en commençant par cette page:

<!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>

Aime la façon dont votre "rapide" exemple même prend soin de paramètres de police etc 😛 Travaillé à l'Opéra, mais IE vis (surprise!).

OriginalL'auteur buti-oxa

0

Je suggère de faire un 30 x 1 (Hauteur x Largeur) de l'image, de le remplir en noir et réglez l'opacité à environ 35%... Enregistrer sous .png (non compatible avec les < navigateurs IE7)

Ajouter l'image à votre arrière-plan de menu CSS classe comme suit:
```
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
```
Je sais que cela fonctionne parce que c'est ce que j'ai fait pour mon site. Le site n'est pas terminé, mais vous pouvez voir une capture d'écran:

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

HTH

OriginalL'auteur Logan Young

Vous devez vous connecter pour publier un commentaire.