Que me gustaría poner de titulares en mi sitio como este: http://cl.ly/0m3F0j392e0G1n0s0T34
Lo que me gustaría idealmente gusta hacer es utilizar el texto para el título y, a continuación, tener un 10px 10px gif repita horizontalmente después de ella.

EDICIÓN: debo añadir que me gustaría usar una textura de fondo así que no se puede establecer cualquier color sólido para el elemento h2.

He sido capaz de añadir en el gif tras el título, pero yo no puedo conseguir que se repita, aunque he de añadir repeat-x. Aquí está el código que he usado:

h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}

Hay soluciones para esta o cualquier métodos alternativos? Yo prefiero no recurrir a la segmentación del todo el título como una imagen. He pensado acerca de la flotación del título a la izquierda, a continuación, flotando en un div vacío a la derecha con el gif como la repetición de una imagen de fondo pero me imagino que esto es lo que los :después de pseudo-elemento es, por derecho?

InformationsquelleAutor Scott L | 2011-10-23

4 Comentarios

  1. 3

    Un poco chapucero y se implican agregar overflow-x:hidden; para el elemento principal, pero debe hacer el truco:

    h2 {
        position: relative;
        padding-right: 10px;
        float: left;
        }
    h2::after {
        content: '';
        position: absolute;
        left: 100%;
        right: 9999px;
        background: url(image.gif);
        height: 10px;
        width: 9999px;
        }
    • FYI nota la diferencia en la notación entre pseudo-elementos y pseudo-clases en CSS3
    • FYI nota la diferencia entre la compatibilidad del navegador y CSS3 😛
  2. 0

    Puede establecer los atributos de su después de pseudo elemento. Lo que yo haría es establecer el contenido a «» (vacío) y, a continuación, establecer la anchura y la altura a la pseudo elemento. Usted puede configurar el fondo de las reiteradas gif como normal entonces.

    h2:after {
      content: "";
      height:20px;
      width:400px;
      background:url('img/imagehere.gif') repeat-x top left;
    }
    • Gracias por la respuesta. He intentado eso y parece lógico, pero no vale la pena por el motivo que sea. Lo he configurado en JSfiddle para mostrar: jsfiddle.net/PMc4S
    • Aquí ya va jsfiddle.net/PMc4S/1
  3. 0

    Cuando se utiliza content:url() presionado clase crear un img elemento. Usted necesidad de utilizar background en este caso. Como lo dijo Erik.

    Pero si el tamaño de su texto en el título no es conocido (aka contenido dinámico), a continuación, pseudo elemento no es un buen trabajo a su alrededor. Usted puede utilizar un marcado así:

    <h1><span>your text content</span></h1>

    Y, a continuación, agregar el fondo repetitivo a h

    h1{ background:'url(img/imagehere.gif) repeat-x';}

    Para ocultar el fondo, en parte, a que el texto aparece de hacer el span‘s fondo en un color sólido

    span{background:white} 

    Actualización:

    si usted tiene una imagen de fondo en virtud de su h1, entonces usted puede hacer esto:

    Mismo HTML: <h1><span>your text content</span></h1>

    CSS:

    decir que su body tener una imagen de fondo:

    body{background-image:(foo)}

    a continuación, desea bar para ser su imagen de repetir el título. Usted debe hacer esto:

    h1{background:url(bar)}

    Y agregar mismo fondo de su body a la span que contiene el texto:

    h1 span{background-image:(foo)}

    Esto podría resolver su problema. Mira este El violín a ver en acción. No dependía de su tamaño de texto o cualquier otra cosa.

    Nota: si está utilizando un span entonces usted debe hacer es dispaly:inline-block

    Actualización:

    La base de su solicitud me repensar esto. He utilizado tables este tiempo. Código sin explicación:

    HTML

    <table>
        <tbody>
            <tr>
                <td><h1>Heading</h1></td>
                <td class="pattern"></td>
            </tr>
        </tbody>
    </table>

    CSS

    body{background:url(foo)}
    table, tbody, tr{width:100%;}
    .pattern{background:url(bar); width:100%;}

    Ver en acción<

    • Hola, buena solución! Problema es que estos elementos están en la parte superior de un fondo de textura (lo siento, no he estado esta en el post original) por lo que un color sólido va a parecer un poco extraña
    • He actualizado mi respuesta. Creo que he contestado la pregunta. Sí??
    • Hola, sí que también una buena solución. El problema creo que voy a tener es que la textura me gustaría uso es bastante detaild (estoy pensando en un modelo) de modo que las dos imágenes de fondo no coincidan. Me da la vuelta en su violín para mostrar: enlace
    • OK, lo tengo! Ver las actualizaciones! (Odio las mesas demasiado, pero es mejor que usar JS por el estilo)
    • Mohsen ha sido una enorme ayuda y realmente agradezco a ayudar! Se parece a la CSS truco de Chris, que funciona de maravilla así
  4. 0

    La respuesta por encima de Erik Hinton funcionará si se agrega «display:block» de la declaración, de la siguiente manera:

    h2:after {
      content: "";
      display:block;
      height:20px;
      width:400px;
      background:url('img/imagehere.gif') repeat-x top left;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here