Fondo blanco semitransparente a un div

Emilio14 · 27 Feb 2014

Hola,

Necesito ayuda para un div. Es una caja con un fondo de imagen y sobre ella hay un texto centrado: Edit fiddle - JSFiddle

El problema está en que cuando le aplico un efecto de opacidad a una parte del contenedor (porque quiero que tenga un fondo más blanco con menos opacidad) se aplica también al texto, y el texto quiero que tenga toda la opacidad.

Y si puede ser, para que quede más estético, que el ancho tenga bordes redondeados y no ocupe todo el width, sino solo un poco más que el ancho del texto (como muestro en la imagen, pero el fondo de relleno con la opacidad).

Cito al maestro @lobogris por si sabe la solución, aunque cualquier otro que sepa puede ayudarme

Pagaré si hace falta.

lobogris · 27 Feb 2014

@Emilio14 te lo miro en un rato, que voy a por el pan xD

Emilio14 · 27 Feb 2014

lobogris dijo:
@Emilio14 te lo miro en un rato, que voy a por el pan xD

Muchas gracias, como lo consigas solucionar esta vez no te vas sin que te pague al menos 1$ XD

Silvia77 · 27 Feb 2014

para darle transparencia al fondo pero no la texto, en lugar de usar opacity dale el color de fondo con notacion rgba en lugar de hexadecimal o rgb normal, asi:

background: rgba(255,255,255,0.5);

eso te dará un fondo blanco semitransparente...

pero ojo! dale ANTES (mas arriba) una regla rgb normal. Por qué? porque los navegadores antiguos no entienden rgba asi que has de darle una opcion. Al situar esa regla antes, haces que los navegadores que si loentiendan lo ignoren y usen la ultima, poer los que no , se quedan con la que entienden.

no se si era eso lo que buscabas...

BotPress · 27 Feb 2014

Lo que dice Silvia es totalmente valido

Silvia77 · 27 Feb 2014

bordes redondeados:

border-radius

y una web muy buena donde estan todas las relgas y estilos explicadas y con "try me"s y todo

W3Schools Online Web Tutorials

Emilio14 · 27 Feb 2014

Silvia77 dijo:
bordes redondeados:

border-radius

y una web muy buena donde estan todas las relgas y estilos explicadas y con "try me"s y todo

W3Schools Online Web Tutorials

Muchas gracias, aplicando lo que me has dicho y usando márgenes y padding he conseguido el resultado que quería

lobogris · 27 Feb 2014

Emilio14 dijo:
Muchas gracias, como lo consigas solucionar esta vez no te vas sin que te pague al menos 1$ XD

Jajaja, no hace falta :qmeparto:

Como bien dice Silvia tienes que poner un color de fondo con opacidad, si se la das al div se la das a todo, puedes usar RGBA o HSLA pero está más soportado RGB, la A es el filtro de opacidad.

Después, sobre cerrar un div con /> pues como que no xD y los estilos inline déjalos para Javascript, siempre que sea posible todo en hojas de estilo externas, en cuanto a filter es para IE7 u 8 no recuerdo y la etiqueta center no cumple con los estándares de HTML5, los navegadores la siguen representando pero tu documento si es HTML5 no será válido. Ahí te he reconstruido lo que creo que buscas: Edit fiddle - JSFiddle

Emilio14 · 27 Feb 2014

lobogris dijo:
Jajaja, no hace falta :qmeparto:

Como bien dice Silvia tienes que poner un color de fondo con opacidad, si se la das al div se la das a todo, puedes usar RGBA o HSLA pero está más soportado RGB, la A es el filtro de opacidad.

Después, sobre cerrar un div con /> pues como que no xD y los estilos inline déjalos para Javascript, siempre que sea posible todo en hojas de estilo externas, en cuanto a filter es para IE7 u 8 no recuerdo y la etiqueta center no cumple con los estándares de HTML5, los navegadores la siguen representando pero tu documento si es HTML5 no será válido. Ahí te he reconstruido lo que creo que buscas: Edit fiddle - JSFiddle

Lo había hecho como pude, pero tu ejemplo supera la perfección. Como siempre, muchísimas gracias y haré caso de tus consejos

- - - Actualización- - -

lobogris dijo:
Jajaja, no hace falta :qmeparto:

Como bien dice Silvia tienes que poner un color de fondo con opacidad, si se la das al div se la das a todo, puedes usar RGBA o HSLA pero está más soportado RGB, la A es el filtro de opacidad.

Después, sobre cerrar un div con /> pues como que no xD y los estilos inline déjalos para Javascript, siempre que sea posible todo en hojas de estilo externas, en cuanto a filter es para IE7 u 8 no recuerdo y la etiqueta center no cumple con los estándares de HTML5, los navegadores la siguen representando pero tu documento si es HTML5 no será válido. Ahí te he reconstruido lo que creo que buscas: Edit fiddle - JSFiddle

Qué cosa más rara... Ahora que estaba implementándolo he puesto el CSS en style.css y luego he pegado el código HTML en un widget de texto de Wordpress, pero se muestra como una lista normal y no muestra ni fondo ni nada.

lobogris · 27 Feb 2014

Emilio14 dijo:
Lo había hecho como pude, pero tu ejemplo supera la perfección. Como siempre, muchísimas gracias y haré caso de tus consejos

- - - Actualización- - -

Qué cosa más rara... Ahora que estaba implementándolo he puesto el CSS en style.css y luego he pegado el código HTML en un widget de texto de Wordpress, pero se muestra como una lista normal y no muestra ni fondo ni nada.

Pues algo has hecho mal, tal vez tengas cacheada la hoja de estilos en el navegador.

Emilio14 · 27 Feb 2014

lobogris dijo:
Pues algo has hecho mal, tal vez tengas cacheada la hoja de estilos en el navegador.

Pues sí, eso era XDDDD

(¿De qué planeta vienes? ¿Cómo sabes tanto? ¿Cómo alcanzas la perfección? :dale2

lobogris · 27 Feb 2014

Emilio14 dijo:
Pues sí, eso era XDDDD

(¿De qué planeta vienes? ¿Cómo sabes tanto? ¿Cómo alcanzas la perfección? :dale2

xDD No se tanto, puse una coma en vez de una 'o'.

Si te ha pasado atí, probablemente le pase a los demás, así que lo mejor que podrías hacer sería añadir un query string al link de CSS tipo:

HTML:

<link href="http://miweb.com/micss.css?f47b01543d62f346856e55" rel="stylesheet">

Esto evita que muestre la hoja cacheada, si es Wordpress es probable que tengas ?v=3.8.1 o algo así y hay que cambiarlo desde functions.php

Emilio14 · 27 Feb 2014

lobogris dijo:
xDD No se tanto, puse una coma en vez de una 'o'.

Si te ha pasado atí, probablemente le pase a los demás, así que lo mejor que podrías hacer sería añadir un query string al link de CSS tipo:

HTML:

<link href="http://miweb.com/micss.css?f47b01543d62f346856e55" rel="stylesheet">

Esto evita que muestre la hoja cacheada, si es Wordpress es probable que tengas ?v=3.8.1 o algo así y hay que cambiarlo desde functions.php

No sé implementarlo xD He puesto el código con el enlace de mi web y el "micss" por mi "style.css" encima del widget y nada.
La web se va a lanzar el 14 de marzo, así que no creo que haya problemas si no meto eso, no?

lobogris · 27 Feb 2014

Emilio14 dijo:
No sé implementarlo xD He puesto el código con el enlace de mi web y el "micss" por mi "style.css" encima del widget y nada.
La web se va a lanzar el 14 de marzo, así que no creo que haya problemas si no meto eso, no?

Entonces no es necesario, lo decía porque a otros visitantes les podría pasar lo mismo

Fondo blanco semitransparente a un div

Emilio14

Adjuntos

lobogris

Emilio14

Silvia77

BotPress

Silvia77

Emilio14

lobogris

Emilio14

lobogris

Emilio14

lobogris

Emilio14

lobogris

Comparte esta página