拉伸背景图像css？
拉伸背景图像css？
提问于 2011-04-14 19:48:55
<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;
}我想要在整个<td>单元格中扩展background-image
回答 3
Stack Overflow用户
发布于 2011-04-14 19:52:28
不能拉伸背景图像(直到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>
Stack Overflow用户
发布于 2014-01-24 00:01:28
我想你要找的是
.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;
}Stack Overflow用户
发布于 2016-05-26 19:44:40
只需将以下代码粘贴到您的代码行中：
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5662735
复制相关文章
相似问题