5

Deseo poner color de fondo mediante CSS a un texto, pero únicamente al texto y no a la línea entera del texto.

El color de fondo del texto sería negro, por ejemplo.

Código:

#visor_imagenes {
  text-align: center;
  color: #fff;
  background-color: #000;
}
<h2 id='visor_imagenes'>VISOR DE IMAGENES</h2>

1
  • 2
    Y que error te sale? lo veo bien, no se que necesitas.
    – zerokira
    Commented el 5 ene. 2018 a las 19:50

3 respuestas 3

6

Una opción sería diferenciar los elementos.

  • Poner un <span> para el texto con una clase donde apliques el estilo de color de texto y de fondo requerido sólo para el texto. Dado que el span es un contenedor en línea (inline), te permitirá aplicar el color y el fondo específicamente al texto dentro de él y no a todo el bloque, como ocurre con el h2, que es un elemento en bloque (block).
  • Dejar el id visor_imagenes sólo para el encabezado y para centrar el texto que habrá en él.

Ejemplo:

#visor_imagenes {
  text-align: center;
}

.blanco-rojo {
  color: #FFFFFF;
  background-color: red;
}
<h2 id='visor_imagenes'><span class="blanco-rojo">VISOR DE IMAGENES</span></h2>

0
5

En una mezcla de ambas respuestas te sugiero lo siguiente, si lo que quieres es que el título h1 se coloque solo en negro de fondo, pero que cubra solo el texto y no el bloque entero, sería algo así:

body{ text-align: center }

.titulo{
 background: black;
 color: white;
 font-size: 18px;
 font-family: arial;
}

.dos{ display: inline-block; }
<h1 class="titulo uno">
Esto es solo un ejemplo sin el inline-block
</h1>

<h1 class="titulo dos">
Esto es solo un ejemplo con el inline-block
</h1>

Si quieres que solo dentro del título, solo un texto se subraye de color negro, entonces deberás encerrar esa palabra en una etiqueta inline, por ejemplo: span.

body{ text-align: center }

.titulo{
 background: black;
 color: white;
 font-size: 18px;
 font-family: arial;
}

.dos{ display: inline-block; }

.titulo span{ background: red; color: white;}

.tres { background: initial; color: initial;}

.tres span{ background: black; }
<h1 class="titulo uno">
Ejemplo sin el inline-block, <span>con texto resaltado</span>
</h1>

<h1 class="titulo dos">
Ejemplo con el inline-block, con <span>texto resaltado</span>
</h1>

<h1 class="titulo tres">
Ejemplo con solo <span>texto resaltado</span>
</h1>

-1

No se si entiendo tu pregunta, entiendo que lo que quieres es que digamos este simplemente subrayada la frase de tu h2 ¿no?

De ser así se me ocurre esto

#visor_imagenes{
    text-align: center;
    color: #FFFFFF;
    display: inline;
}

echo "<h2 id='visor_imagenes'>VISOR DE IMAGENES</h2>";

Convirte el h2 a elemento en línea y ya funciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.