Foros del Web » Creando para Internet » CSS »

Texto con fondo transparente

Estas en el tema de Texto con fondo transparente en el foro de CSS en Foros del Web. Hola a todos, estoy intentando haces unos dias y me faltan algunos detalles para lograr que el texto tengo el fondo transparente. La cosa es ...
  #1 (permalink)  
Antiguo 15/08/2014, 19:33
 
Fecha de Ingreso: enero-2010
Mensajes: 400
Antigüedad: 13 años
Puntos: 6
Texto con fondo transparente

Hola a todos, estoy intentando haces unos dias y me faltan algunos detalles para lograr que el texto tengo el fondo transparente. La cosa es asi, yo logre hacer esto:



Y mi idea es que quede asi:



estoy usando este codigo:

Código CSS:
Ver original
  1. .letradestacada {
  2.     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.72);
  3.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B7000000,endColorstr=#B7000000);
  4.     color: #FFFFFF;
  5.     display: inline-block;
  6.     font-family: arial;
  7.     font-size: 10px;
  8.     /*max-width: 440px;*/
  9.     padding: 0 10px;
  10.     }

Pero como veran hay muchos espacios que sobran, me gustaria que el fondo vaya solamente por los sectores que haya palabras. Espero que puedan ayudarme. Gracias
  #2 (permalink)  
Antiguo 15/08/2014, 19:54
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 11 meses
Puntos: 998
Respuesta: Texto con fondo transparente

para que quede como quieres, el elemento que tenga el fondo debe de ser un elemento inline. 2 opciones, o le pones display:inline a los títulos/párrafos con ese fondo (lo que te puede crear efectos secundarios no deseados) o pones el texto dentro de un elemento SPAN (que por defecto es inline) y le das el fondo a ese span

PD: ese filter mucho mejor si en todo caso lo pones en un comentario condicional para ie8
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 15/08/2014, 20:00
 
Fecha de Ingreso: enero-2010
Mensajes: 400
Antigüedad: 13 años
Puntos: 6
Respuesta: Texto con fondo transparente

Gracias por responder, cuando le pongo display:inline; desaparece todo y queda solo una puntia transparante pero ya no se ve el texto...
  #4 (permalink)  
Antiguo 16/08/2014, 05:39
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 11 años, 10 meses
Puntos: 17
Respuesta: Texto con fondo transparente

webosiris se referia a
Código:
display:inline-block;
revisa este ejemplo que hice
http://codepen.io/elestudiantefantasma/pen/qyDGi
  #5 (permalink)  
Antiguo 16/08/2014, 11:41
Avatar de edgarisrael1992  
Fecha de Ingreso: junio-2013
Mensajes: 54
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Texto con fondo transparente

yo uso display:inline-block;
con
vertical-align: top; para que queden juntos a la altura superior.
__________________
creo que la principal razón que tengas éxito en lo que haces es amar tu trabajo
  #6 (permalink)  
Antiguo 16/08/2014, 12:00
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 11 meses
Puntos: 998
Respuesta: Texto con fondo transparente

Cita:
Iniciado por juangemelo01 Ver Mensaje
webosiris se referia a
Código:
display:inline-block;
no... me refería a lo que me refería, inline a secas de ahí mi aclaración que también "puede crear efectos secundarios no deseados" por lo que sugiría usar un span.
inline-block no causa el efecto que bbrian quiere obtener, se ver perfectamente en tu ejemplo, el fondo semitransparente ocupa todo el espacio disponible y no solo donde hay letras.

aquí hay un listado con las técnicas disponibles: http://css-tricks.com/multi-line-padded-text/
personalmente uso span con box-shadow, creo que es la técnica más Kiss
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 16/08/2014 a las 12:16
  #7 (permalink)  
Antiguo 20/08/2014, 13:19
 
Fecha de Ingreso: agosto-2014
Ubicación: Málaga
Mensajes: 9
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Texto con fondo transparente

Buenas, para realizar ese efecto el texto deberia de ir separado de la capa del fondo negro (el texto encima de esa capa) y si quieres lograr esa transparencia dale a la capa del fondo un opacity con eso consigues la transparencia. Saludos y espero que te sirva
  #8 (permalink)  
Antiguo 20/08/2014, 14:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 11 meses
Puntos: 998
Respuesta: Texto con fondo transparente

Cita:
Iniciado por adry02ml Ver Mensaje
Buenas, para realizar ese efecto el texto deberia de ir separado de la capa del fondo negro (el texto encima de esa capa) y si quieres lograr esa transparencia dale a la capa del fondo un opacity con eso consigues la transparencia. Saludos y espero que te sirva
no, se puede hacer usando rgba para manipular la opacidad solo del color de fondo.

Por favor, antes que alguien más venga a contestar, todos LEAN lo que puso el usuario que inició el tema. No tiene problemas en hacer la opacidad.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: background, color, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:36.