背景图像仅限伸缩y轴，保持重复-x

问题描述：

我将图像设置为div的背景图像。 DIV大小正在变化，其内部是渐变的图像。背景图像仅限伸缩y轴，保持重复-x

CSS：

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

我需要使图像适合仅在y轴的div的高度，保持重复-X跨浏览器的解决方案。 DIV正在通过JQuery动态调整大小。

他们可能是一个使用JQuery的跨浏览器选项。我不介意使用脚本来实现这一点，以获得跨浏览器支持（IE7 +）。我不想拉伸图像，因为当您在x轴上拉伸图像时会失去强度，从而使半透明png图像几乎透明。

谢谢。

答

我也有这个问题。在大多数浏览器中都很容易，但IE8和以下版本都很棘手。

解决方案为现代（什么也没IE8及以下）的浏览器：

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

有jQuery插件，可以模仿背景大小IE8及以下，特别backgroundSize.js但它不工作，如果你想让它重复。

反正就这样开始了我的可怕黑客：

<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>

确保包括足够<img>的覆盖所需的区域。

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; 
}

不管怎么说，这个想法是创建图像拉伸的效果。

JSFiddle。

背景图像仅限伸缩y轴，保持重复-x

相关推荐