0

Lo intenté utilizando un "span" y si reduce el background a solo el texto, pero se siguen viendo juntos el de abajo con el de arriba. También intenté crear un nuevo "span" con la parte del titulo que quedaba abajo, pero tampoco sirvió.

¿Que puedo hacer?

Imagen referencial

Imagen referencial

.back {
    background-color: #AFA34F;
    color: black;
    margin-top: 50px;
    margin-bottom: 50px;
}

#hh {
    text-align: center;
    font-size: 250%;
}

#Titulo {
    width: 65%;
    margin: 0px auto;
    position: relative;
    top: 380px;
}
<div id="Titulo">
<h1 id="hh"><span class="back">Este es un texto de prueba para mostrar<span class="back"><br>lo que obtengo con mi código</span></span></h1>
</div>

2 respuestas 2

0

h1 {
    font-size: 2em;
    color: black;
    text-align: center;
    max-width: 50vw;
}

h1 span {
    background-color: cyan;
    line-height: 2em;
    padding: 6px;
}
<h1>
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet provident nisi eum fugit reprehenderit cumque.</span>
</h1>

2
  • Mejor añade una explicación al dar una respuesta de que es lo que le hace falta, que es lo que hace...
    – Zander
    el 16 sep. 2021 a las 7:24
  • Hola. En span solo agregaría el background-color de ese modo solo será el texto el que tenga el fondo y en h1 agrega línea-height para darle el espacio que necesites.
    – OrielC.
    el 16 sep. 2021 a las 7:57
0

En span solo agregaría el background-color de ese modo solo será el texto el que tenga el fondo y en h1 agrega línea-height para darle el espacio que necesites.

Algo así

`
<style>
#hh {
color: black;
text-align: center;
font-size: 250%;
line-height: 60px;
margin-top: 50px;
margin-bottom: 50px;

}
#hh span {
background-color: #AFA34F;
}
#Titulo {
width: 65%;
margin: 0px auto;
position: relative;
top: 380px;
}
</style>

<div id="Titulo">
<h1 id="hh"><span>Este es un texto de prueba para mostrar lo que obtengo con mi código</span></h1>
</div>`

Tu Respuesta

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

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