伸展背景图像CSS?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)
<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>

这是我的CSS脚本

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

我想伸展一下background-image到处都是<td>

提问于
用户回答回答于
.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;
}

工作范围:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 支持 background-size 但不是关键字)
  • Firefox 3.6+ (Firefox 4 支持非供应商前缀版本)

此外,还可以尝试将此作为ie解决方案。

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

用户回答回答于

CSS3:

.style1{
   ...
   background-size:100%;
}

可以通过以下方式指定宽度或高度:

background-size:100% 50%;

它的宽度和高度分别是100%和50%。

扫码关注云+社区