拉伸背景图片的CSS？ [英] Stretch background image css?

问题描述

 ＆LT; TD类=STYLE1ALIGN =中心HEIGHT =35＆GT;
    ＆LT; D​​IV的风格=溢出：隐藏;宽度：230px;'＆GT;
        ＆LT;一类='链接'HERF =''的onclick ='主题（小于？= $关键;＆GT;）'＆GT;
        ＆LT;跨度ID ='名字＆LT; = $关键;＆GT;'＆GT;＆LT; = $名称;？＆GT;＆LT; / SPAN＆GT; ＆所述; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / TD＆GT;
 

这是我的CSS脚本

  .style1 {
    背景图像：网址（'HTTP：//localhost/msite/images/12.PNG'）;
    背景重复：不重复;
    背景位置：左中心;
    }
 

我要伸展背景图片遍布＆LT; TD＆GT; 细胞

解决方案

  .style1 {
        背景：网址（图像/ bg.jpg）不重复中心中心固定;
        -webkit-背景大小：盖;
        -moz-背景大小：盖;
        -o-背景大小：盖;
        背景大小：盖;
}
 

在作品：

• 的Safari 3+


• 铬无论+


• IE 9


• 歌剧10+（Opera 9.5中支持的背景大小，但不会关键字）


• 的Firefox 3.6+（火狐4支持非供应商prefixed版）

此外，您可以尝试一下本作的解决方案，即

 过滤器：进程id：DXImageTransform.Microsoft.AlphaImageLoader（SRC ='myBackground.jpg。'，sizingMethod ='规模'）;
    -ms过滤器进程id：DXImageTransform.Microsoft.AlphaImageLoader（SRC ='myBackground.jpg'，sizingMethod ='规模'）;
    缩放：1;
 

信贷本文由克里斯Coyier
<一href=\"http://css-tricks.com/perfect-full-page-background-image/\">http://css-tricks.com/perfect-full-page-background-image/

<td class="style1" align='center' height='35'>
    <div style='overflow: hidden; width: 230px;'>
        <a class='link' herf='' onclick='topic(<?=$key;?>)'>
        <span id='name<?=$key;?>'><?=$name;?></span> </a>
    </div>
</td>

This is my CSS script

.style1 {
    background-image:url('http://localhost/msite/images/12.PNG');
    background-repeat:no-repeat;
    background-position:left center;
    }

I want to stretch the background-image all over the <td> cell

解决方案

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

In addition you can try this for an ie solution

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

这篇关于拉伸背景图片的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！