关于html：拉伸背景图片CSS？


Stretch background image css?

1
2
3
4
5
6
7
<td class="style1" align='center' height='35'>
 
    )'>
      <span id='name<?=$key;?>'><?=$name;?></span>
   
 
</td>

这是我的CSS脚本

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

我想在整个

单元格中拉伸background-image

相关讨论

1
2
3
4
5
6
7
.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解决方案

1
2
3
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的这篇文章

Perfect Full Page Background Image

相关讨论

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

1
2
3
4
.style1 {
  ...
  background-size: 100%;
}

您可以使用以下命令指定宽度或高度：

1
background-size: 100% 50%;

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

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

相关讨论

您无法拉伸背景图片(直到CSS 3)。

您将必须使用绝对定位，这样才能将图像标签放在单元格内并拉伸以覆盖整个单元格，然后将内容放在图像顶部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table cellpadding="0" cellspacing="0" border="10">
  <tr>
    <td class="style1">
     
        <img src="http://placekitten.com/20/20" alt="" />
       
         
            <span>Answer</span>
         
       
     
    </td>
  </tr>
</table>

相关讨论

我想你要找的是

1
2
3
4
5
6
7
8
9
.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;
}
相关讨论

This works flawlessly @ 2019

1
2
3
4
5
6
.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

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

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