我有一个图像设置为 div 的背景图像。 DIV 大小正在变化,其内部是渐变图像。
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 图像几乎透明。
Thanks.
我也有这个问题。在大多数浏览器中这很容易,但 IE8 及以下版本就有点棘手了。
现代(除 IE8 及以下版本之外的任何浏览器)浏览器的解决方案:
#scroller_shadow {
background: url(../img/ui/shadow.png) center repeat-x;
background-size: auto 100%;
}
有一些 jQuery 插件可以模拟 IE8 及以下版本的背景大小,特别是背景大小.js https://github.com/louisremi/jquery.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 http://jsfiddle.net/UcYMg/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)