背景图像仅延伸y轴，保持repeat-x [英] Background image stretch y-axis only, keep repeat-x

问题描述

我有一个图像设置为div的背景图片。 DIV大小正在改变，它们内部是一个渐变的图像。

CSS：

  #scroller_shadow {
 background- image：url（../ img / ui / shadow.png）; 
 background-repeat：repeat-x; 
 background-position：top; 
} 
  

我需要一个跨浏览器解决方案来使图像适合div只在y轴，保持repeat-x。 DIV正在通过JQuery动态调整大小。

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

谢谢。

解决方案

我也有这个问题。

现代（不是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.pngalt => 
< img src =./ img / ui / shadow.pngalt => 
< img src =./ img / ui / shadow.pngalt => 
 ... 
< img src =./ img / ui / shadow.pngalt => 
< / div> 
< / div> 
  

确保包含足够的< img>

  
 #scroller_shadow {
 width：500px; / *无论你的宽度是什么* / 
 height：100px; / *无论你的高度是什么* / 
 overflow：hidden; 
} 
 
 #scroller_shadow_tile {
 / *足够大，如果父元素的宽度是动态的，你只能使它不合理的宽。 * / 
 width：9999px; 
 height：100％; 
} 
 
 #scroller_shadow_tile img {
 height：100％; 
 float：left; 
 width：auto; 
} 
  

无论如何，想法是从图像创建拉伸效果。 p>

JSFiddle 。

I have an image set as a background image of a div. The DIV size is changing and inside their is the image which is a gradient.

CSS:

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

I need a cross-browser solution for making the image fit the height of the div in the y-axis only, keeping the repeat-x. The DIV is being resized dynamically via JQuery.

Their might be a cross-browser option using JQuery. I don't mind using scripts to achieve that in order to get cross-browser support (IE7+). I don't want to stretch the image because it loses the intensity when you stretch the image on the x-axis, making a semi-transparent png image almost transparent.

Thanks.

解决方案

I had this problem too. It's easy in most browsers, but IE8 and below it's tricky.

Solution for modern (anything not IE8 and below) browsers:

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

There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn't work if you want it to repeat.

Anyways thus begins my 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>

Make sure to include enough <img>'s to cover the area needed.

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

Anyways, the idea is to create the stretch effect from the images.

JSFiddle.

这篇关于背景图像仅延伸y轴，保持repeat-x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！