拉伸背景图片CSS？

编程问答 2022-04-25

问题描述

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

解决方法

.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 Whatever + IE 9+ 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/     ,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(\'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;
}
    ,  这在2019年可以正常工作 
.marketing-panel  {
    background-image: url(\"../images/background.jpg\");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}
    ,只需将其粘贴到您的代码行中： 
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" />
    
拉伸背景图片