拉伸背景图像的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/msitehttp://img.dovov.com12.PNG'); background-repeat:no-repeat; background-position:left center; }
我想在整个<td>单元格中展开background-image
.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+
- 铬无论+
- IE 9+
- 歌剧10+（歌剧9.5支持背景大小，但不是关键字）
- Firefox 3.6+（Firefox 4支持非供应商前缀版本）
另外，你可以试试这个解决scheme
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/
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>
我想你在找什么
.style1 { background: url('http://localhost/msitehttp://img.dovov.com12.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" />
