如何在 CSS 中拉伸背景圖片以填充元素？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-11-07 04:14:02

原創

222 人瀏覽過

How to Stretch a Background Image to Fill an Element in 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中文網其他相關文章！