css - pantalla - expandir imagen de fondo html

-moz-background-inline-policy en webkit

Question

¿Algo como -moz-background-inline-policy existe en Webkit? Esta propiedad básicamente le da la oportunidad de especificar cómo debe renderizarse el fondo para cada línea de un elemento en línea. Acepto imágenes del mismo elemento en diferentes navegadores.

Este es el resultado en firefox (con -moz-background-inline-policy: each-box; )

Esto está en Google Chrome (lo probé -webkit-background-inline-policy , pero parece que no existe)

ACTUALIZAR

Dado que no existe una propiedad de política de fondo en Webkit, estoy tratando de encontrar una solución diferente usando jQuery. Estoy agregando un lapso extra detrás de cada línea de texto. Está bien, excepto por el hecho de que el texto no se mide correctamente. Puedes ver ambos ejemplos en acción aquí:

1. Solución original (política en línea de fondo): http://jsfiddle.net/notme/mCnGy/5/
2. Nueva solución (extensiones jQuery): http://jsfiddle.net/notme/my3br/1/

SOLUCIÓN

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: ''absolute'',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(//S+/s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '''';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('''') + text[i].replace(/(/S)/, ''$1<span/>'') + text.slice(i + 1).join(''''));

        var topOffset = jQuery(''span'', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

//thanks @thirtydot
var fixIt = function() {
    //remove previous .dummy
    $(''.dummy'').remove();

    $(''div.node-title-text'').each(function(index) {

        var dummy = $(this).clone().removeClass().addClass(''dummy'').appendTo($(this).parent());
        console.log(dummy);
        $(dummy).wrapLines(''<span><span>'', ''</span></span>'');

        var padding = 15;

        dummy.css({
            left: -padding,
            right: -padding
        }).find('' > span'').css(''padding-left'', padding*2);

    });
};

$(window).load(function(){
    $(window).resize(fixIt).resize(); //trigger resize event onLoad
});

Answer 1

Esta característica no estándar no está implementada en otros navegadores. Tendrá que ajustar cada línea en un lapso y luego aplicar el fondo a ese lapso.

Podría usar javascript para ordenar los tramos si necesitara texto dinámico, pero si es posible codificarlo, entonces no debería ser demasiado complejo.

Answer 2

Esto funciona, pero probablemente podría hacerse más eficiente:

http://jsfiddle.net/thirtydot/UGBXD/3/

Aquí está el código completo para la posteridad:

JS :

//thanks @Peter Bailey - http://.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: ''absolute'',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(//S+/s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '''';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('''') + text[i].replace(/(/S)/, ''$1<span/>'') + text.slice(i + 1).join(''''));

        var topOffset = jQuery(''span'', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

var fixIt = function() {
    $(''.dummy'').remove();

    $(''div.node-title-text'').each(function(index) {
        //remove previous .dummy
        var dummy = $(this).clone().removeClass().addClass(''dummy'').appendTo($(this).parent());
        $(dummy).wrapLines(''<span><span>'', ''</span></span>'');
    });
};
$(window).resize(fixIt).resize(); //trigger resize event onLoad

CSS:

.node-title {
    position: relative;
    margin-bottom: 16px
}
.node-title-text {
    position: relative;
    z-index: 2
}
.dummy {
    position: absolute;
    top: 0; left: 0;
    z-index: 1
}
.dummy > span {
    background: url(''http://i.stack.imgur.com/HPofR.png'') top left no-repeat,
        url(''http://i.stack.imgur.com/C8ImH.png'') top right no-repeat,
        url(''http://i.stack.imgur.com/9is9r.png'') top center repeat-x;
}
.dummy > span > span {
    visibility: hidden
}

HTML: (igual que el tuyo)

<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed suscipit fermentum leo eu scelerisque.</a>
    </div>
</div>