Avisos
Vaciar todo
Buen dia, actualmente estoy practicando desde cero la creación de una plantilla para joomla 1.5.x.-
Mi intención, es tenes el fondo fijo, a traves de css seria asi
body {
background-image:url( 
);
background-repeat:no-repeat;
background-attachment: fixed;
}
Pero lo que en realidad necesito, a parte de tener de fondo una imagen fija, que el com_content aparezca sobre la imagen pero con transparencia de hasta 0.6, lo que agregue es lo siguiente:
#contenedor {
opacity: 0.6;
background-color:##58FAF4;
background-image: none;
background-origin: padding-box;
margin: 0 auto;
width: 922px;
}
MI duda surge, si existe la posibilidad desde CSS hacer que el color agregado, en hexadecimal: en la parte de content sea transparente y solamente afecte al fondo y no al contenido completo. Adjunto una imagen de refresh
¿o necesariamente tengo que volver a ingresar una imagen con transparencia X?
Estuve curioseando el codigo de la siguiente pagina, ya que es algo similar al que se ajusta a mi necesidad, link http://www.bspp.fr/.-
En fin, agradecerle por su atención y aguardo vuestra sugerencia.- 
Respondido : 02/10/2010 9:04 am
Hola tatukapata,
Lo que comentas, en líneas generales, se puede hacer, no debe ser problema alguno, pero es bueno estudiar el ejemplo que pones para que observes que para resaltar el contenido (texto) no se utilizan colores hexadecimales con un nivel de transparencia (en CSS3 se puede) sino que utilizan imagenes .png con un nivel de transparencia ya aplicado en las imágenes para utilizarlas de fondo del texto de los 2 rectángulos que aparecen en el medio de la página.
La imagen rectangular de la parte izquierda es la siguiente:
- 
Aplicada con el siguiente estilo:
element.style {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:fixed;
background-color:#000000;
background-image:url("/files/background/bg1.jpg");
background-position:center top;
background-repeat:no-repeat;
width:100%;
}
Para la imagen centra-derecha utilizaron la siguiente imagen .png:
- http://www.bspp.fr/sites/all/themes/bspp/images/content/encart2_home_bg.png
Y el siguiente estilo css:
#encart2 {
-moz-background-clip:border !important;
-moz-background-origin:padding !important;
-moz-background-size:auto auto !important;
background-attachment:scroll !important;
background-color:transparent !important;
background-image:url("../images/content/encart2_home_bg.png") !important;
background-position:0 0 !important;
background-repeat:no-repeat !important;
float:right;
height:168px;
position:relative;
width:502px;
}
Y para el footer, esa banda horizontal inferior que han utilizado para ubicar elementos de menús entre otros, han creado un estilo, pero también una imagen "mainmenu_li_bg_old.png" gestionada con el estilo para que ocupe el ancho total del footer.
- 
#footer_bg {
-moz-background-clip:border !important;
-moz-background-origin:padding !important;
-moz-background-size:auto auto !important;
background-attachment:scroll !important;
background-color:transparent !important;
background-image:url("../images/arche/header/mainmenu_li_bg_old.png") !important;
background-position:center top !important;
background-repeat:repeat !important;
bottom:0;
position:fixed;
width:100%;
z-index:11 !important;
}
Como verás, al final no es tanto aplicar estilos con transparencias sino utilizar imágenes debidamente creadas para que suplan ciertas carencias que con estilos CSS no siempre se consiguen los mismos resultados.
En tu caso particular lo interesante seria que dibujases, bien por CSS o con imágenes luego posicionadas mediante CSS, áreas alrededor de las zonas de texto (left, mainbody, right, etc.) que permitan delimitar dicho texto con un fondo más opaco que el del resto de la página que permita la lectura del texto y no convierta el fondo en un inconveniente.
Saludos
Respondido : 02/10/2010 1:14 pm
Hola tatukapata
Si le aplicas transparencia a un contenedor div, este y todo su contenido tendrá transparencia.
Para superar esto existen dos técnicas:
1- Utilizar una imagen .png de transparencia, sólo hay que tener en cuenta los parches necesarios para IE6
2- Utilizar un div posicionado adecuadamente por CSS y creado directamente en html o por javascript. Por ejemplo:
Si observas ambos son independientes y para mostrarlos superpuestos se hace por CSS.
Saludos.
Respondido : 03/10/2010 4:28 am
