桌行的两个背景图象 [英] Two background image for table row

问题描述

我尝试对整个表格行应用两个背景图片。

我搜索了Google，发现了一个小的css代码片段，但是，它不工作：

  .TdStyle {
 background-image：url（images / buttonback.png）left repeat ，
 url（images / down_arrow.png）right no-repeat; 
} 
  

请指导我如何操作。

解决方案

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

使用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> 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
< / p> 
< p class =no_colour> 
< strong>< br />这三个段落位于包含多个背景图片的div内。< / strong>删除了背景颜色。 
< / p> 
< p> 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，使段落更大。 
这只是一些填充内容，以使段落更大。 
这只是一些填充内容，使段落更大。 
< / 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> 
 / *专有的缩放属性给IE的hasLayout属性，它解决了几个错误，不要忘记插入你的包装器id * / 
 #outerWrapper #contentWrapper，#outerWrapper #contentWrapper #content {
 zoom ：1; 
} 
 / *现在让它成为IE8多背景图片* / 
 #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; 
} 
 / *修复IE clearType * / 
 #multipleBackgroundImages p {
 position：relative; / *需要重新启用IE的clearType * / 
} 
< / style> 
<！[endif]  - > 
 

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

  filter：progid：DXImageTransform。微软。 AlphaImageLoader（src ='.. / images / lakeside2.png'，sizingMethod ='crop'）; 
  

IE筛选器选项：

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

不要忘记更改图片文件引用指向您的图像。

问题：过滤器根本不适用

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

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

重要信息： IE9预览已更改了IE alpha图像加载器的工作原理，或在某些情况下根本无法工作。如果您安装了IE9预览，这个解决方案在任何版本的IE都可能无法工作。

资料来源： strong> http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html p>

I am trying apply two background images for an entire table row. One background image will make my table row look bit bluish and another image will appear on the right most side of table row.

I searched Google and found a small css snippet but it did not work:

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

Please guide me how to do so.

解决方案

Not a clean way but the only way that I know:

One of the biggest problems with using the CSS3 Multi-backgrounds is that it is not usable in Internet Explorer, however by using the: AlphaImageLoader IEFilter, it is possible to place two background images in an element.

One advantage to using this IE specific filter is that it retains any alpha transparency that is applied to png's, without the requirement of any htc or javascript 'fixes'. The main disadvantage is that the image displays in the top, left-hand corner, and cannot be positioned.

The CSS3 for multiple backgrounds is achieved via a comma seperated list for the properties:

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]-->

For IE6/7 you would use the following for the IE filter:

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

IE Filter options:

sizingMethod='crop' will retain the image dimensions, if this is changed to, sizingMethod='scale' the image will resize to the size of the element it is applied to, (auto resizable background image!).

Don't forget to change the image file references to point to your images. Naturally this can be applied to any element from the tag to a

tag.

Problem: The filter does not apply at all

A filter does solely apply to elements that have "layout", that is the reason for the zoom: 1; property.

If you have multiple "standalone" versions of IE installed, say IE7 side-by-side IE6. The Conditional Comment may not work as intended because the version vector of such a combo is normally the version of the newest browser, i.e. 7.xxxx, therefore, [if lt IE 7] does not match for IE6's parser in this constellation.

IMPORTANT : The IE9 preview has changed how the IE alpha image loader works, (or does not work at all in some cases). If you have the IE9 preview installed it is possible that this 'solution' will appear to not work at all in any version of IE.

Source: http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

这篇关于桌行的两个背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！