如何在 CSS 中拉伸背景圖片以填充元素？

在CSS 中拉伸背景圖像

希望您的背景圖像佔據元素的整個空間，例如

，但似乎無法實現它能正確拉伸嗎？這是一個簡單的 CSS 解決方案。

提供的CSS 腳本定義了一個名為“style1”的類，具有以下屬性：

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

雖然這將在元素上顯示背景圖像，但它不會不要拉伸它來填充整個單元格。為此，我們需要修改background屬性：

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

background-size: cover屬性確​​保背景影像調整大小以覆蓋整個元素，而不扭曲其縱橫比。為了讓影像保持在原位，我們使用background-position: center center和background-attachment:fixed。

此解決方案適用於多種瀏覽器，包括Safari、Chrome、IE 9、Opera 10、和 Firefox 3.6 。

對於 Internet Explorer，可以使用替代解決方案：

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

這使用專有的過濾器來拉伸背景圖像，但僅在 IE 中支援。

鳴謝：Chris Coyier 的文章“完美的整頁背景圖像”，網址為 http://css-tricks.com/perfect-full-page-background-image/

以上是如何在 CSS 中拉伸背景圖片以填充元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！