拉伸背景图像css? [英] Stretch background image css?

问题描述

<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 脚本

This is my CSS script

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

我想将 background-image 拉伸到整个 <td> 单元格

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;
}

工作于:

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

另外你可以试试这个 IE 解决方案

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;

感谢 Chris Coyier 撰写的这篇文章http://css-tricks.com/perfect-full-page-background-图片/

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

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