<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>
答案 0 :(得分:271)
.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;
}
适用于:
此外,您可以尝试使用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/
答案 1 :(得分:54)
CSS3:http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
.style1 {
...
background-size: 100%;
}
您可以使用以下方式指定宽度或高度:
background-size: 100% 50%;
将伸展100%的宽度和50%的高度。
答案 2 :(得分:9)
您无法拉伸背景图像(直到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>
答案 3 :(得分:7)
我认为你在寻找的是
.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;
}
答案 4 :(得分:0)
这在2019年可以正常工作
.marketing-panel {
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
答案 5 :(得分:-6)
只需将其粘贴到您的代码行中即可:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />