Html 拉伸背景图片css？

Stretch background image css?

提问by Buffon

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

This is my CSS script

这是我的 CSS 脚本

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

I want to stretch the background-imageall over the <td>cell

我想拉伸background-image整个<td>单元格

回答by Blowsie

.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;
}

Works in:

工作于：

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+ (Opera 9.5 supported background-size but not the keywords)
• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

• 野生动物园 3+
• Chrome 随心所欲+
• 浏览器 9+
• Opera 10+（Opera 9.5 支持背景大小但不支持关键字）
• Firefox 3.6+（Firefox 4 支持非厂商前缀版本）

In addition you can try this for an IE solution

另外你可以试试这个 IE 解决方案

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

感谢 Chris Coyier 撰写的这篇文章 http://css-tricks.com/perfect-full-page-background-image/

回答by Calum

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

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

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

You can specify just width or height with:

您可以仅指定宽度或高度：

background-size: 100% 50%;

Which will stretch it 100% of the width and 50% of the height.

这将拉伸它 100% 的宽度和 50% 的高度。

---

---

Browser support:http://caniuse.com/#feat=background-img-opts

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

回答by Guffa

You can't stretch a background image (until CSS 3).

您不能拉伸背景图像（直到 CSS 3）。

You would have to use absolute positioning, so that you can put an image tag inside the cell and stretch it to cover the entire cell, then put the content on top of the image.

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

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>

回答by failed_hard

I think what you are looking for is

我想你正在寻找的是

.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;
}

回答by Mujeeb Ishaque

This works flawlessly @ 2019

这在 2019 年完美运行

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

回答by LumiereNG

Just paste this into your line of codes:

只需将其粘贴到您的代码行中：

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