web-dev-qa-db-fra.com

Image d'arrière-plan étirer l'axe y uniquement, garder la répétition-x

J'ai une image définie comme image de fond d'un div. La taille DIV est en train de changer et à l'intérieur se trouve l'image qui est un dégradé.

CSS:

#scroller_shadow{
    background-image:url(../img/ui/shadow.png);
    background-repeat:repeat-x;   
    background-position:top;
}

J'ai besoin d'une solution multi-navigateur pour que l'image s'adapte à la hauteur de la division dans l'axe y uniquement, en gardant la répétition-x. Le DIV est redimensionné dynamiquement via JQuery.

Leur peut être une option multi-navigateur utilisant JQuery. Cela ne me dérange pas d'utiliser des scripts pour y parvenir afin d'obtenir un support multi-navigateur (IE7 +). Je ne veux pas étirer l'image car elle perd de l'intensité lorsque vous étirez l'image sur l'axe des x, ce qui rend une image png semi-transparente presque transparente.

Merci.

csscross-browserbackground-image
29
Idan Shechter

J'ai eu ce problème également. C'est facile dans la plupart des navigateurs, mais IE8 et les versions antérieures sont difficiles.

Solution pour les navigateurs modernes (tout sauf IE8 et inférieurs):

#scroller_shadow {
    background: url(../img/ui/shadow.png) center repeat-x;
    background-size: auto 100%;
}

Il existe des plugins jQuery qui peuvent imiter la taille d'arrière-plan pour IE8 et les versions antérieures, en particulier backgroundSize.js mais cela ne fonctionne pas si vous souhaitez qu'il se répète.

Quoi qu'il en soit commence ainsi mon terrible hack:

<div id="scroller_shadow">
    <div id="scroller_shadow_tile">
        <img src="./img/ui/shadow.png" alt="" >
        <img src="./img/ui/shadow.png" alt="" >
        <img src="./img/ui/shadow.png" alt="" >
        ...
        <img src="./img/ui/shadow.png" alt="" >
    </div>
</div>

Assurez-vous d'inclure suffisamment <img> pour couvrir la zone nécessaire.

CSS:

#scroller_shadow {
    width: 500px; /* whatever your width is */
    height: 100px; /* whatever your height is */
    overflow: hidden;
}

#scroller_shadow_tile {
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
    width: 9999px;
    height: 100%;
}

#scroller_shadow_tile img {
    height: 100%;
    float: left;
    width: auto;
}

Quoi qu'il en soit, l'idée est de créer l'effet d'étirement à partir des images.

JSFiddle .

56
John Henry Briggs