拉伸背景图片的CSS？

Question

<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>单元格中拉伸到整个区域。

- Buffon

---

请注意，拉伸光栅图像会降低其质量。 - wdm

重复https://dev59.com/a3RC5IYBdhLWcg3wOOL1 - Alex Shesterov

@wdm：如果是SVG格式，质量降低不会发生。 - posit labs

Answer 1

.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 支持 background-size 但不支持关键字)
• 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/

- Blowsie

---

这个工作正常，但我只想拉伸高度，我该怎么做？ - Buffon

谢谢您的帮助。当我在您的代码中更改-moz-background-size: 100% 100%;后，它按照我的要求运行了。非常感谢您。 - Buffon

另一个适用于IE8及以下版本的解决方案：https://github.com/louisremi/background-size-polyfill - Irongaze.com

将background-size: cover; 更改为 background-size: 100% 100%; 后对我有用。 - ivan.mylyanyk

我需要一个固定高度（130像素）和全宽的背景。这个代码可以实现：background: url("images/bg.jpg") no-repeat center 0 fixed; 和 background-size: 100% 130px;（等等）。如果按照答案中所述居中高度，当背景图片足够短时，会隐藏背景。 - sleeparrow

由于它被用于3D对象中，因此在没有使用“fixed”情况下工作。相关链接：https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment - Artfaith

Answer 2

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm，是一个介绍CSS背景大小属性的网页。

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

您可以使用以下代码来指定宽度或高度：

background-size: 100% 50%;

这将使它的宽度拉伸到100％，高度拉伸到50％。

---

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

- Calum

---

哇，这对我来说完美地解决了问题 - 我尝试了其他答案和一系列不同的技巧。但这么简单，立即就起作用了。谢谢:D - DylanT 25

Answer 3

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

- Guffa

---

+1，正确。同时，将<img>用<div>包裹，并设置position: relative;和最大宽度/高度也是一个不错的主意。在某些浏览器中，TD本身并没有相对定位。 - madr

我在处理IE时遇到了困难，为此点赞。 - arjuncc

Answer 4

我认为你正在寻找的是

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

- failed_hard

Answer 5

使用下载的图像，花了半天时间才搞清楚这个问题。 创建一个“images”文件夹并将其添加到主文件夹中。

CSS：

background-images: url(/images/{imagename}.jpg);
background-repeat: no repeat; (if repeat)
background-size: cover;

大家好 :D

- user20938484

Answer 6

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

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

- LumiereNG