首頁 > web前端 > css教學 > 如何使用 CSS 拉伸背景圖片以填充 TD 單元格?

如何使用 CSS 拉伸背景圖片以填充 TD 單元格?

Susan Sarandon
發布: 2024-11-05 06:12:02
原創
330 人瀏覽過

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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板