如何在 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中文网其他相关文章！