css - sirve - personalizar generatepress
Fondo CSS "transparente"-problema de menú de navegación loco (5)
Tengo un menú de navegación loco que tengo que codificar. Es un poco difícil. Por favor, vea la captura de pantalla del diseño aquí:
menú de navegación http://i41.tinypic.com/307xfo9.png
captura de pantalla del menú de navegación
Como puede ver, el fondo del elemento del menú "Inicio" es bastante difícil. No puedo entender cómo hacer que su fondo sea "transparente", lo que significa que corta el fondo oscuro y muestra el fondo verde estampado.
¿Sabes cómo hacer esto usando CSS?
Gracias por adelantado.
Otro enfoque interesante para los efectos transparentes (o translúcidos) es dar dos secciones, ya sea
1) la misma imagen de fondo, o
2) imágenes de fondo similares, con una de ellas modificada con color o desenfoque o lo que sea
... y asegúrese de que su background-position sea la misma .
Esto se demuestra en la demo "Complex Spiral" de Eric Meyer . (Aquí hay otra versión que hizo).
Aclaración : esto está en la sección "Edge" de Meyer por una razón: no es compatible con IE6 . ( Gracias, Boris )
Puede emular la posición de fondo fija desafortunadamente no admitida por IE6 (ver la respuesta de nerdposeur) con un cuidadoso posicionamiento "manual" usando la posición de fondo. Posiciona la imagen grande con 0,0 offset. Use la misma imagen para la pestaña seleccionada, pero desviéla hacia la izquierda y hacia arriba exactamente en la posición de la esquina superior izquierda de la pestaña. Eso asegurará la coincidencia exacta de los dos fondos que desee.
Parece que tiene un menú fijo, por lo que significa escribir cuidadosamente CSS de fondo para sus cuatro elementos de menú, uno por uno. Por supuesto, si su menú es dinámico, este enfoque no funciona. Aquí hay una demostración que preparé rápidamente comenzando con esta página :
<!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>
Una manera de hacerlo es el enfoque opuesto que normalmente tomarías. Aplique un fondo negro a los otros elementos, dejando un espacio donde está la pestaña resaltada. Tipo de puertas correderas inversas.
Cree dos imágenes negras muy largas: una para la derecha que tiene una esquina redondeada a la izquierda y otra para la izquierda con la esquina a la derecha y colóquelas a cada lado del elemento actual. Tristemente, no creo que CSS simple pueda hacer esto, pero parece que ya estás usando JS.
No estoy seguro de cuán factible será, está fuera de mi cabeza, pero podría ser un enfoque interesante.
Sugiero hacer una imagen de 30 x 1 (alto x ancho), llenarla de negro y establecer la opacidad en aproximadamente 35% ... Guardar como .png (no es compatible con los navegadores IE7)
Agregue esa imagen a su clase CSS de fondo del menú de la siguiente manera:
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
Sé que esto funciona porque es lo que hice para mi sitio. El sitio no está completo, pero puedes ver una captura de pantalla:
http://www.logansarchive.za.net/preview.jpg
HTH
Puedes usar:
background: transparent;
background: inherit;
Sin embargo, deberá estructurar su HTML de modo que los enlaces de Inicio , Diario , etc. estén incrustados en el cuadro con el fondo.
Para las esquinas redondeadas, mira esto .
O puede usar imágenes con transparencia en forma de fondo.
@Gary [comment]: inherit toma las primeras configuraciones que encuentra subiendo por la jerarquía. Entonces, si tienes una capa intermedia, va a retomar su configuración.
Algo que puedes probar es usar:
background-image: url(''greencheckers''); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
En teoría, debería buscar la primera configuración de background-image , entonces. Pero, nunca he usado esto, entonces no hay garantías.