首页  >  文章  >  web前端  >  如何使用 CSS 拉伸背景图像以填充 TD 单元格?

如何使用 CSS 拉伸背景图像以填充 TD 单元格?

Susan Sarandon
Susan Sarandon原创
2024-11-05 06:12:02183浏览

How to Stretch a Background Image to Fill a TD Cell with CSS?

通过图像拉伸覆盖 TD 单元

问题:通过拉伸背景图像以填充来增强网页使用 CSS 的整个表格单元格 (

)。

CSS 片段:

<code class="css"><style>
.style1 {
    background-image: url('http://localhost/msite/images/12.PNG');
    background-repeat: no-repeat;
    background-position: left center;
}
</style></code>

目标: 使用 CSS 来将背景图像延伸至覆盖整个TD单元,实现“拉伸”效果。

解决方案:

<code class="css">.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;
}</code>

兼容性:

  • Safari 3
  • Chrome
  • IE 9
  • Opera 10
  • Firefox 3.6

IE 的附加选项:

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

致谢:

Chris Coyier 发表的富有洞察力的文章位于:http:// css-tricks.com/perfect-full-page-background-image/

以上是如何使用 CSS 拉伸背景图像以填充 TD 单元格?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn