Question

我尝试使用CSS3属性background-size连续应用阴影背景，并且它在现代浏览器中作为例外工作接受 IE8下面的。

然后我得到了这篇文章中提到的 IE 的解决方案(make background-size work in IE?)

上述解决方案也适用于 IE8以下，但它会按比例缩放图像（水平和垂直）。

但我只需要横向缩放它，因为我使用下面提到的CSS3属性来实现：

background-size: 100% 25%;

/*
    100% for horizontally
    25% for vertically
*/

我的问题：是sizingMethod的任何值，它只是水平或垂直缩放图像（或任何其他解决方法 ^{[^ jQuery / Javascript ^]} ）为现代浏览器获取CSS3属性background-size获得所需的结果？

这是我用过的代码：

CSS：

 .row-shad {
     background:url(../images/cat-bot-shad.png) center bottom no-repeat;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad.png',
    sizingMethod='scale'); /*For IE 8 and less*/

    background-size: 100% 25%; /* for good browsers*/
}

--- 这是live result，在好的浏览器和IE8中，看到差异。 ---

真的应该赞赏这方面的任何帮助。

谢谢！

Answer 1

方法1：固定背景颜色

如果您的背景颜色始终相同，则可以使用如下图像替换：

example 1

当缩放时，比例将得到尊重。

Demo （已测试并使用IE8）

方法2：透明背景

如果你需要一个透明的背景（使用上面的方法），你将不得不添加一个多重过滤器来解决IE的PNG透明度问题：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='http://full-path-to-images/images/cat-bot-shad-ie.png',
    sizingMethod='scale')
    alpha(opacity = 100); /*For IE 8 and less */

用条形注释样式覆盖原始background声明：

<!--[if lt IE 9 ]> 
<style>
.row-shad { background:none; }
</style>
<![endif]-->

Demo （已测试并使用IE8）

顺便说一句，如果您使用conditional comments in your <html> tag，您可以轻松地以这种方式定位IE8：

HTML标记：

<!--[if lt IE 9]> <html class="ielt9"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS：

.ielt9 .row-shad { background:none; }

IE7问题

您的方法在IE7上不起作用。

您可以通过为IE7添加CSS hack和自定义背景图像（全球不到2％的用户）以优雅的方式进行处理：

*background:url(../images/cat-bot-shad-ie7.png) center bottom repeat-x;

*property仅针对IE7及以下版本。或者，您可以通过条件评论轻松完成。

Demo （已测试并使用IE7-8）

将方法2和IE7组合在一起

最终，要同时使用IE8的透明png和IE7的自定义图像，您必须使用多个条件注释：

<!--[if IE 8 ]> 
<style>
#row { background:none; }
</style>
<![endif]-->
<!--[if lt IE 8 ]> 
<style>
#row { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }
</style>
<![endif]-->

Demo （测试并使用IE7-8）

或者，条件html标签：

<!--[if lt IE 8]> <html class="ielt8"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

CSS：

.ie8 .row-shad { background:none; }
.ielt8 .row-shad { background:url(../images/cat-bot-shad-ie7.png) center bottom no-repeat; }

Answer 2

不幸的是，没有办法使IE 8及以下的比例不同于100％/ 100％。这意味着您需要以其他方式执行此操作。

一种方法是使图像适合元素。

由于元素是元素高度的25％，因此将图像高出4倍并用透明或背景颜色填充空白区域，然后将比例高度更改为100%而不是25%使用CSS3属性的浏览器。

background-size: 100%;

由于您使用的是经过长度编码的PNG，因此会为图像添加极少量的数据，并且可以在所有浏览器中正常使用。

唯一的另一种方法是添加一个高度为25％的虚拟元素，并将其显示在元素的正常内容后面，这是非语义的，应该尽可能避免。

Microsoft过滤器大小调整Method ='scale' - 它是否只能水平缩放图像？

2 个答案:

方法1：固定背景颜色

方法2：透明背景

IE7问题

将方法2和IE7组合在一起