如何拉伸IE8，IE9，mozila和chrome的背景图片？ [英] how to Stretch background image for IE8,IE9 ,mozila and chrome?
问题描述
Hai，
i对所有浏览器的设计都有问题，我的设计是在ie9，mozila和chrome中工作，但是 IE8 不起作用。
我的问题是我有一个png图像尺寸是234x71（即234px宽度和71px高度）这个图像用作表td标签的背景，如果屏幕分辨率是1440x900它工作正常，但如果屏幕分辨率增加（即屏幕宽度增加图像不完全适合表td标签，它在左侧提供一些空白区域。
如果我使用
background-size：100％71px; 它将适用于ie9 +，mozila和chrome，但IE8不起作用，我只想根据
| 宽度增加图像的宽度（我给14％代表td宽度它将修复图像，如果屏幕宽度为1440x900），请回复我如何在 IE8 中拉伸图像。 注意：我使用hd表中的td背景，我没有使用任何图像控制 问候 Aravind |
背景尺寸是一个CSS3属性。不幸的是，它仅在IE9 +中受支持。在CSS3之前，背景图像大小由图像的实际大小决定。
修复：
IE特定黑客...
- 让我们用html说你有：
< 表 id = main >
< tr >
< td id = bg >
一些内容
&l t; / td >
< / tr >
< / table >
- 创建两个样式表，一个用于CSS3兼容（主要）样式表，一个用于IE8和更低版本的浏览器。
在CSS3样式表中
＃ bg {
background ： url（someimage.gif）;
background-size ： 100％71px;
}
IE8修复另一个名为ie.css的样式表
＃ bg {
background ： 无重复中心固定;
过滤器 ： progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='someimage.gif'，sizingMethod ='scale'）;
}
- 使用条件语句将CSS添加到你的html，ie8 css。
在< HEAD>添加以下内容
<！ - [if lte IE 8]>
< link rel =stylesheettype =text / csshref =ie8.css/>
<！[endif] - >
实施注释：
此过滤器可缩放整个图像适合分配的区域。如果您的td高度超过71px，这可能会导致问题。
祝您好运！
尝试下面提到的风格
.strechBKImage
{
background：url（WebSiteDesign.jpg）无重复中心固定;
webkit-background-size：cover;
moz-background-size：cover;
o-background-size：cover;
background-size：cover;
filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='WebSiteDesign.jpg'，sizingMethod ='scale'）;
-ms-filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='WebSiteDesign'，sizingMethod ='scale'）;
}
Hai,
i have a problem with design for all browser,my design is work in ie9,mozila and chrome but IE8 not work.
my problem is i have a png image dimensions is 234x71 (i.e 234px width and 71px height)this image is use as background of table td tag,if screen resolution is 1440x900 it works fine, but if screen resolution is increased (i.e screen width is increased the image not fit on table td tag fully,it give some white space on leftside).
if i use
background-size:100% 71px;it will work on ie9+,mozila and chrome,but IE8 not work,i want only increase the width of image based on
| width (i give 14% for td width it will fix image if screen width 1440x900),pls reply me how to stretch image in IE8 also. NOTE: i use background for td in html table,i am not use any image control Regards Aravind |
background-sizeis a CSS3 property. Unfortunately, It is only supported in IE9+. Before CSS3, the background image size was determined by the actual size of the image.
The fix:
IE specific hack...
- Lets say in html you have:
<table id="main"> <tr> <td id="bg"> some content </td> </tr> </table>
- Create two stylesheets, one for CSS3 compatible (main) stylesheet and one for IE8 and lower browsers.
In CSS3 stylesheet
#bg { background:url(someimage.gif); background-size:100% 71px; }
IE8 fix in another stylesheet named ie.css
#bg { background: no-repeat center center fixed; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='someimage.gif', sizingMethod='scale'); }
- Add the css to your html, ie8 css using a conditional statement.
In<HEAD>add the following
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css" /> <![endif]-->
Implementation Note:
This filter scales the entire image to fit in the allocated area. If your td is greater that 71px in height, this may cause issues.
Good Luck!
Try below mention style
.strechBKImage { background: url(WebSiteDesign.jpg) no-repeat center center fixed; webkit-background-size: cover; moz-background-size: cover; o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WebSiteDesign.jpg', sizingMethod='scale'); -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WebSiteDesign', sizingMethod='scale'); }
这篇关于如何拉伸IE8，IE9，mozila和chrome的背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
