拉伸背景图像 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 脚本

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

我想把 background-image伸展到整个 <td>细胞

327505 次浏览
小开

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

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

您可以使用以下方法指定宽度或高度:

background-size: 100% 50%;

可以拉伸100% 的宽度和50% 的高度。

浏览器支持: http://caniuse.com/#feat=background-img-opts

小开

你不能拉伸背景图像(直到 CSS 3)。

您必须使用绝对定位，这样您就可以在单元格内放置一个图像标记，并将其拉伸以覆盖整个单元格，然后将内容放置在图像的顶部。

table {
width: 230px;
}


.style1 {
text-align: center;
height: 35px;
}


.bg {
position: relative;
width: 100%;
height: 100%;
}


.bg img {
display: block;
width: 100%;
height: 100%;
}


.bg .linkcontainer {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
}
<table cellpadding="0" cellspacing="0" border="10">
<tr>
<td class="style1">
<div class="bg">
<img src="http://placekitten.com/20/20" alt="" />
<div class="linkcontainer">
<a class="link" href="#">
<span>Answer</span>
</a>
</div>
</div>
</td>
</tr>
</table>

小开
最佳答案 
.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 +
  • 谷歌浏览器
  • IE9 +
  • Opera 10 + (Opera 9.5支持背景大小，但不支持关键字)
  • 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;

本文由 Chris Coyier 撰写 Http://css-tricks.com/perfect-full-page-background-image/

小开

我觉得你要找的是

.style1 {
background: url('http://localhost/msite/images/12.PNG');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
小开

把这个粘贴到你的代码行里:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

提交答案