Texto con fondo transparente

[bbrian]

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:

.letradestacada {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.72);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B7000000,endColorstr=#B7000000);
    color: #FFFFFF;
    display: inline-block;
    font-family: arial;
    font-size: 10px;
    /*max-width: 440px;*/
    padding: 0 10px;
    }
 

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

[webosiris]

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

[bbrian]

Gracias por responder, cuando le pongo display:inline; desaparece todo y queda solo una puntia transparante pero ya no se ve el texto...

[juangemelo01]

webosiris se referia a

Código:

display:inline-block;

revisa este ejemplo que hice
http://codepen.io/elestudiantefantasma/pen/qyDGi

[edgarisrael1992]

yo uso display:inline-block;
con
vertical-align: top; para que queden juntos a la altura superior.

[webosiris]

Iniciado por juangemelo01

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

[adry02ml]

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

[webosiris]

Iniciado por adry02ml

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.