首页css图片自适应平铺

css图片自适应平铺

时间: 2024-01-23 13:15:33 浏览: 111

以下是两种CSS实现图片自适应平铺的方法： 1. 使用background-size属性 ```html <html> <div class="footer-img"></div> </html> <style> .footer-img { max-width: 100%; border: 2px solid red; background: url('../assets/img/bottom-bg.png') no-repeat; background-size: contain; padding-top: 48%; } </style> ``` 在上述代码中，通过设置background-size为contain，可以使背景图片在保持原始比例的同时，尽可能地填充整个容器。 2. 使用background-size和background-attachment属性 ```css <style> .footer-img { margin: 0px; background: url(images/bg.png) no-repeat; background-size: 100% 100%; background-attachment: fixed; } </style> ``` 在上述代码中，通过设置background-size为100% 100%，可以使背景图片完全填充整个容器。同时，通过设置background-attachment为fixed，可以使背景图片固定在视口中，实现滚动时图片不移动的效果。

阅读全文