Question

我正在尝试为整个表格行应用两个背景图像。一个背景图像会使我的表格行看起来有点偏蓝，而另一个图像将出现在表格行的最右侧。

我搜索了Google并找到了一个小的CSS代码段，但它没有用：

.TdStyle{
    background-image: url(images/buttonback.png) left repeat, 
                      url(images/down_arrow.png) right no-repeat;
}

请指导我如何操作。

Answer 1

不是干净的方式，而是我所知道的唯一方式：

使用CSS3多背景的一个最大问题是它在Internet Explorer中不可用，但是通过使用：AlphaImageLoader IEFilter，可以在元素中放置两个背景图像。

使用这个特定于IE的过滤器的一个优点是它保留了应用于png的任何alpha透明度，而不需要任何htc或javascript'fixes'。主要缺点是图像显示在左上角，无法定位。

多个背景的CSS3是通过属性的逗号分隔列表实现的：

background-image: url(../images/lakeside2.png), 
                  url(../images/lilys.jpg); 
background-position: top left, bottom right;

<强> HTML：

<div id="multipleBackgroundImages"> 
    <p>
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
    </p> 
    <p class="no_colour">
        <strong><br />These three paragraphs are inside of a div that has multiple background images</strong>The background color removed.
    </p>
    <p>
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
       This is just some filler content to make the paragraph larger.
    </p> 
</div>

<强> CSS：

#multipleBackgroundImages { 
    background-image: url(../images/lakeside2.png), 
                      url(../images/lilys.jpg); 
    background-position: top left, bottom right; 
    background-repeat: no-repeat; 
    border: 1px solid black; 
    padding: 0 1em; 
}

#multipleBackgroundImages .no_colour { 
    background-color: transparent;
}

#multipleBackgroundImages p+p+p { 
    background-color: #ffc; 
    padding: 1em; 
}

<!--[if gt IE 7]> 
    <style type="text/css"> 
    /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */ 
        #outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content { 
            zoom: 1; 
        } 
    /* Now lets make it IE8 Multi-background images */ 
        #multipleBackgroundImages { 
            background-image: url(../images/lilys.jpg); 
            background-position: bottom right; 
            background-repeat: no-repeat; 
            -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')"; 
            border: 1px solid black; 
            padding: 0 1em; 
        } 
    /* Fix for IE clearType */ 
        #multipleBackgroundImages p { 
            position: relative; /* required to re-enable IE's clearType */ 
        } 
    </style> 
<![endif]-->

对于IE6 / 7，您将使用以下IE过滤器：

filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='../images/lakeside2.png', sizingMethod='crop');

IE过滤器选项：

sizingMethod='crop'将保留图片尺寸，如果更改为，sizingMethod='scale'图片将调整为其应用元素的大小，（自动调整大小的背景图片！）。

不要忘记更改图像文件引用以指向图像。当然，这可以应用于从标签到

标签的任何元素。

问题：过滤器根本不适用

过滤器仅适用于具有“布局”的元素，这是缩放的原因：1;属性。

如果您安装了多个“独立”版本的IE，请说IE7并排IE6。条件注释可能无法按预期工作，因为这种组合的版本向量通常是最新浏览器的版本，即7.xxxx，因此，[if lt IE 7]与此星座中IE6的解析器不匹配。

重要事项： IE9预览版改变了IE alpha图像加载器的工作方式，（或者在某些情况下根本不起作用）。如果您安装了IE9预览版，则可能在任何版本的IE中，此“解决方案”似乎都不起作用。

来源： http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

Answer 2

我的建议：IE6，IE7不能在多个背景下工作（我测试过）。

桌行的两个背景图象

2 个答案: