1

我试图通过使用 CSS3 属性连续应用阴影背景，background-size它在现代浏览器中以例外方式工作，接受下面的 IE8。

然后我得到了这篇文章中提到的IE解决方案（让背景大小在 IE 中工作？）

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

但是我只需要水平缩放它，就像我使用下面提到的 CSS3 属性实现的那样： 

background-size: 100% 25%;

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

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

这是我使用过的代码：

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*/
}

---这是实时结果，在良好的浏览器和 IE8 中，看看区别。---

真的应该感谢这方面的任何帮助。

谢谢！

4

2 回答 2

4

方法一：固定背景色

如果您的背景始终具有相同的颜色，您可以使用这样的图像替换：

示例 1

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

演示（经过测试并使用 IE8）

方法二：透明背景

如果您需要透明背景（使用上述方法），则必须添加多个过滤器来解决 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]-->

演示（经过测试并使用 IE8）

顺便说一句，如果您在标签中使用条件注释<html>，您可以通过这种方式轻松定位 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 及以下版本。或者，您可以使用有条件的注释轻松地做到这一点。

演示（测试并使用 IE7-8）

将方法 2 和 IE7 hack 放在一起

最终，要同时使用 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]-->

演示（在 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; }
于 2012-10-01T13:06:01.327 回答
0

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

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

由于您的元素是元素高度的 25%，因此将图像提高 4 倍并用透明或背景色填充空白空间，然后将缩放高度更改为，100%而不是25%使用 CSS3 属性的浏览器。

background-size: 100%;

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

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

于 2012-09-27T06:40:14.403 回答